API: The Component

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

Example:

  1. -| pages/
  2. ---| parent/
  3. ------| child.vue
  4. ---| parent.vue

This file tree will generate these routes:

  1. ;[
  2.   {
  3.     path: '/parent',
  4.     component: '~/pages/parent.vue',
  5.     name: 'parent',
  6.     children: [
  7.       {
  8.         path: 'child',
  9.         component: '~/pages/parent/child.vue',
  10.         name: 'parent-child'
  11.       }
  12.     ]
  13.   }
  14. ]

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

  1. <template>
  2.   <div>
  3.     <h1>I am the parent view</h1>
  4.     <nuxt-child :foobar="123" />
  5.   </div>
  6. </template>

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

  1. <template>
  2.   <div>
  3.     <nuxt-child keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  4.   </div>
  5. </template>
  7. <!-- will be converted into something like this -->
  8. <div>
  9.   <keep-alive :exclude="['modal']">
  10.     <router-view />
  11.   </keep-alive>
  12. </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:

  1. <template>
  2.   <div>
  3.     <nuxt-child name="top" />
  4.     <nuxt-child />
  5.   </div>
  6. </template>

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