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!
nuxt-child doesn't render the parent component
Viewed 4086
1 Answers
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.
Related