nuxt.js - nuxt-link to open a page in the parent of a nuxt-child

Question

I'm using a NuxtJS pages setup similar to this:

./pages/about.vue
./pages/phones/index.vue
./pages/phones/details.vue
./pages/phones.vue

Inside the ./pages/phones.vue -file I'm using a <nuxt-child /> component to render the ./pages/phones/index.vue and ./pages/phones/details.vue inside of it. Like so:

File: ./pages/phones.vue:

<nuxt-child />

Inside the ./pages/phones/details.vue -page I have a link that needs to open the ./pages/about.vue in the "parent" <Nuxt /> (the normal NuxtJS router-view) NOT the <nuxt-child /> router view.

This is similar to how old-school iframes can open a URL in their parent by using target="_parent" attribute.

But the nuxt-link "about" (that links to ./pages/about.vue -page) is still opening in the nuxt-child (router-view).

I think their should be some kind of target property on the <nuxt-link> -component:

<nuxt-link :to="{ name: 'about', target: '_parent' }">About</nuxt-link>

NOTE: The above example doesn't work. I'm looking for something like this.

I've searched the web; but, how do you open a link from within a <nuxt-child /> into the parent <Nuxt /> (router) view?

Answer 1

Maybe you can use a custom <nuxt/> component as <custom-nuxt/> like below:

<template>
    <main>
        <transition
            mode="out-in"
            name="page"/>
            <router-view v-if="!nuxt.err"/>
            <error-view :error="nuxt.err" v-else/>
        </transition>
    </main>
</template>
<script type="text/javascript">
import Vue from 'vue';
import ErrorView from '@/layouts/error';
export default{
    components: {
        ErrorView
    },
    beforeCreate () {
        Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt);
    }
}
</script>

use this instead of <nuxt/>, and replace <nuxt-link/> with <router-link/>, code just like what you did in a SPA-Vue project. Don't forget to code your own <error-view/>