API: The <nuxt> 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 3 ways to handle internal key prop of <router-view/>.

  • nuxtChildKey prop
  1. <template>
  2.   <div>
  3.     <nuxt :nuxt-child-key="someKey"/>
  4.   </div>
  5. </template>
  • 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.