Nuxt/docs/3.api/2.components/3.nuxt-layout.md

title
<NuxtLayout>

<NuxtLayout>

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

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

<NuxtLayout /> can be used to override default layout on app.vue, error.vue or even page components found in the /pages directory.

name prop

<NuxtLayout /> component accepts the name prop, which you can pass to use a non-default layout, where name can be a static string, reactive reference or a computed property. It must match the name of the corresponding layout file in the /layouts directory.

Examples

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// layouts/custom.vue
const layout = 'custom'
</script>

::alert{icon=👉} Please note the layout name is normalized to kebab-case, so if your layout file is named errorLayout.vue, it will become error-layout when passed as a name property to <NuxtLayout />. ::

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

Layout and Transition

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

Accessing a layout's component ref

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

<template>
    <NuxtLayout ref="layout" />
</template>

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

::ReadMore{link="/docs/guide/directory-structure/layouts"} ::