⚠️ You are looking at the english version of the page. Help us translate it here.
Want to take a look at our new docs? Our new docs are now in beta. Have fun!

API: The <nuxt-child> Component

This component is used for displaying the children components in a nested route.

Example:

-| pages/
---| parent/
------| child.vue
---| parent.vue

This file tree will generate these routes:

;[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

To display the child.vue component, we have to insert <nuxt-child/> inside pages/parent.vue:

<template>
  <div>
    <h1>I am the parent view</h1>
    <nuxt-child :foobar="123" />
  </div>
</template>

<nuxt-child/> accepts keep-alive and keep-alive-props:

<template>
  <div>
    <nuxt-child keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- will be converted into something like this -->
<div>
  <keep-alive :exclude="['modal']">
    <router-view />
  </keep-alive>
</div>

Child components can also receive properties like a regular Vue component.

To see an example, take a look at the nested-routes example.

The activated and deactivated hooks

When using keep-alive on <nuxt-child/>, the children components will register two additional lifecycle hooks: activated and deactivated. These hooks are called on the client side when entering and leaving the child component.

Named View

Introduced with Nuxt v2.4.0

<nuxt-child/> accepts name prop to render named-view:

<template>
  <div>
    <nuxt-child name="top" />
    <nuxt-child />
  </div>
</template>

To see an example, take a look at the named-views example.

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us