Want to take a look at our new docs? Our new docs are now in beta. Have fun!

API: The <nuxt> Component

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>
  1. 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.

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