nuxt-child doesn't render the parent component

Question

My folder structure is like this:

|-profile
|-- index.vue
|-- address/index.vue

And then I do <nuxt-child /> which doesn't render the content of profile/index.vue! It just loads a whole new route. Please help!

Answer 1

Folder structure above will create a whole new route, instead of a nested one.

You can see exact same structure in Nuxt.js Routing documentation example.

Examples of nested routes are also available in documentation

In your case, in order to render nested route in <nuxt-child>, following structure will work:

|-pages/
|--| profile/
|-----| address.vue
|-----| index.vue
|--| profile.vue

And <nuxt-child> tag should be inside profile.vue page. This way profile/index.vue will be rendered when user navigates to /profile and address.vue will be rendered when user navigates to /profile/address.