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

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!

Platinum Sponsors

Storyblok
Support Us