Nuxt.js: understanding <nuxt-child> component
The <nuxt-child/>
is a replacement for the child component, based on the route.
Using one is all that you need:
<template>
<div>
<h3>Parent element</h3>
<nuxt-child/>
</div>
</template>
Then put what you need that differs in the child.
Edit: the child page is brought in based on the route. This is a manual way of doing nested routes.
For example, say I had some events. The parent page is event
, and then each event is a child.
- events
- christmas
- easter
When I go to events/christmas
or events/easter
, I’ll see the ‘event’ page but with the contents of the event I wanted. The parent page events/
could possibly just contain a list of all the events for me to visit.
Billal Begueradj
I am Billal BEGUERADJ. My blog: www.begueradj.com The longest answer here and this question are mine (previous profiles).
Updated on June 04, 2022Comments
-
Billal Begueradj almost 2 years
In Nuxt.js, I did this folder structure:
├── parent │ ├── child1.vue │ └── child2.vue ├── parent.vue
In parent.vue, I have this:
<template> <div> <h3>Parent element</h3> <ul> <li><nuxt-child/></li> <li><nuxt-child/></li> </ul> </div> </template>
In child1.vue:
<template> <div> <h3>Child 1</h3> </div> </template>
In child2.vue:
<template> <div> <h3>Child 2</h3> </div> </template>
I launch the server (yarn run dev) and go this URI:
http://localohost:3000/parent
where I see this:Parent element - -
If I go to
http://localohost:3000/parent/child1
, I see this:Parent element - Child 1 - Child 1
If I go to
http://localohost:3000/parent/child2
, I see this:Parent element - Child 2 - Child 2
Question:
From the documentation, I understand that child1.vue and child2.vue are children of parent.vue, so I expect to see them list when I visit
http://localhost:3000/parent
, but they were not displayed. Each child is displayed only when I point to its URI. Anyone to explain me this behavior? -
Billal Begueradj over 5 yearsI am aware of all what you said, and I would like if you could elaborate on based on the route because I feel the real explanation is nearby there. Thank you
-
j.k almost 3 yearsHow can I maintain the nested uri of "parent/child" without rendering the parent page contents when I navigate to the child?
-
Zoe Edwards almost 3 years@JacobKochocki I think that’s more of a Vue Router issue, I don’t think there is a way of doing that