Nuxt.js: Nuxt-view with nuxt-link

[StasB93R]

The problem that im facing has to do with nuxt-link and nuxt-view. As far as i've used vuejs i remember that if you put router-link and down below you put a router-view it will render everything with navigation bar if its there. However with nuxt i put nuxt-link (or router-link for testing) and below i put nuxt-view (or router-view for testing) it redirects me to another page but the navigation bar dissapears. At first i was told that i might need to use layout instead of components but its pretty much the same result. Here is the code:

 <template>
   <div id="">
     <nuxt-link :to='{name: "terms-sections-test1"}'>Go to 1 </nuxt-link>
     <nuxt-link to='/terms/sections/test2'>Go to 2 </nuxt-link>
     <router-link to='terms/sections/test1'>ROUTER LINK</router-link>


     <nuxt-view> </nuxt-view>
     <router-view ></router-view>



   </div>
 </template>
 <script>
 export default {
 /* eslint-disable */
   layout: 'navigation'

 }
 </script>
 <style lang="css" scoped>
 </style>

Is there a work around so that i dont have to include layout everytime in its children components? or i need to include them everywhere? sorry for the noob question but i cant really see good documentation for nuxt-view.

P.S: everytime when i press on my first nuxt-link it redirects me to the page but when i go back to initial page (the code above) it gives me this warning:

    [Vue warn]: Unknown custom element: <nuxt-view> - did you register the component correctly? For 
     recursive components, make sure to provide the "name" option.

Please help :)

_{This question is available on Nuxt.js community (#c977)}

[StasB93R]

For example for one of my projects i used vuejs webpack with the following code

      <div class="col span-1-of-2 navigation-terms">
        <ul class="nav-terms">
            <router-link :to ="{name: 'usering'}" tag = 'li' style="cursor:pointer;">Terms of use</router-link>
            <router-link :to ="{name: 'Conf'}" tag = 'li' style="cursor:pointer;">Confidentiality  </router-link>
        </ul>
    </div>

    <div class="col span-1-of-2 display-terms">
        <transition enter-class=""
                      enter-active-class="animated fadeInRight"
                      leave-class = ''
                      leave-active-class = ''>
            <router-view> </router-view>
         </transition>
    </div>

and it worked perfectly fine, so why when i try to use the same thing in nuxt it doesnt do it? is it something that i should expect from SSR or its a problem on nuxt.js side and for now i just need to include layout everytime?
EDIT
If it doesnt work, then whats the point of nuxt-view if in anyway u r going to be redirected to a completly new page?

[alexchopin]

Hi @StasB93R,
As mentioned in the documentation it's not <nuxt-view></nuxt-view> but <nuxt-child></nuxt-child> for nested routes.
And only use <nuxt></nuxt> in your layout.

[StasB93R]

still not helping i have a repo on https://github.com/StasB93R/nuxt-child, i did everything as u said but it doesnt do the job. Sorry for opening another issue i didnt know that i can post here after its been closed

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.