Nuxt.js: understanding <nuxt-child> component

Question

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?

Thomas Edwards Thomas Edwards · Accepted Answer · 2018-10-04T14:34:14

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.

Nuxt.js: understanding <nuxt-child> component

1 Answers