API: The Component

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

Example (layouts/default.vue):

  1. <template>
  2.   <div>
  3.     <div>My nav bar</div>
  4.     <nuxt />
  5.     <div>My footer</div>
  6.   </div>
  7. </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
  1. <template>
  2.   <div>
  3.     <nuxt :nuxt-child-key="someKey" />
  4.   </div>
  5. </template>
  1. key option in page components: string or function
  1. export default {
  2.   key(route) {
  3.     return route.fullPath
  4.   }
  5. }
  • 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.