<NuxtLayout>

You can use <NuxtLayout /> component to activate the default layout on app.vue or error.vue.

<template>  <NuxtLayout>    some page content  </NuxtLayout></template>

Props

• name: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It must match the name of the corresponding layout file in the layouts/ directory.
  • type: string
  • default: default

<script setup lang="ts">// layouts/custom.vueconst layout = 'custom'</script><template>  <NuxtLayout :name="layout">    <NuxtPage />  </NuxtLayout></template>

<template>  <NuxtLayout name="error-layout">    <NuxtPage />  </NuxtLayout></template>

Additional Props

NuxtLayout also accepts any additional props that you may need to pass to the layout. These custom props are then made accessible as attributes.

<template>  <div>    <NuxtLayout name="custom" title="I am a custom layout">      <-- ... -->    </NuxtLayout>  </div></template>

In the above example, the value of title will be available using $attrs.title in the template or useAttrs().title in <script setup> at custom.vue.

<script setup lang="ts">const layoutCustomProps = useAttrs()console.log(layoutCustomProps.title) // I am a custom layout</script>

Transitions

<NuxtLayout /> renders incoming content via <slot />, which is then wrapped around Vue’s <Transition /> component to activate layout transition. For this to work as expected, it is recommended that <NuxtLayout /> is not the root element of the page component.

<template>  <div>    <NuxtLayout name="custom">      <template #header> Some header template content. </template>    </NuxtLayout>  </div></template>

Layout's Ref

To get the ref of a layout component, access it through ref.value.layoutRef

<script setup lang="ts">const layout = ref()function logFoo () {  layout.value.layoutRef.foo()}</script><template>  <NuxtLayout ref="layout" /></template>