components-nuxt.md

title	description
API: The <nuxt> Component	Display the page components inside a layout.

This component is used only in layouts to display the page components.

Example (layouts/default.vue):

<template>
  <div>
    <div>My nav bar</div>
    <nuxt/>
    <div>My footer</div>
  </div>
</template>

To see an example, take a look at the layouts example.

Props:

• nuxtChildKey: string
  • This prop will be set to <router-view/>, useful to make transitions inside a dynamic page and different route.
  • Default: $route.path

There are 2 ways to handle internal key prop of <router-view/>.

1. nuxtChildKey prop

<template>
   <div>
     <nuxt :nuxt-child-key="someKey"/>
   </div>
</template>

2. key option in page components: string or function

export default {
  key (route) {
    return route.fullPath
  }
}

• name: string (introduced with Nuxt v2.4.0)
  • This prop will be set to <router-view/>, used to render named-view of page component.
  • Default: default

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