> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# <NuxtLayout>

> Nuxt provides the <NuxtLayout> component to show layouts on pages and error pages.

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

```vue [app/app.vue] theme={null}
<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>
```

## Props

<ParamField path="name" type="string | false" default="default">
  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 `app/layouts/` directory, or `false` to disable the layout.

  ```vue [app/pages/index.vue] theme={null}
  <script setup lang="ts">
  // layouts/custom.vue
  const layout = 'custom'
  </script>

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

  <Note>
    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 />`.
  </Note>

  ```vue [error.vue] theme={null}
  <template>
    <NuxtLayout name="error-layout">
      <NuxtPage />
    </NuxtLayout>
  </template>
  ```
</ParamField>

<ParamField path="fallback" type="string" default="null">
  If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the `app/layouts/` directory.
</ParamField>

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

```vue [app/pages/some-page.vue] theme={null}
<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.

```vue [app/layouts/custom.vue] theme={null}
<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.

<CodeGroup>
  ```vue [app/pages/index.vue] theme={null}
  <template>
    <div>
      <NuxtLayout name="custom">
        <template #header>
          Some header template content.
        </template>
      </NuxtLayout>
    </div>
  </template>
  ```

  ```vue [app/layouts/custom.vue] theme={null}
  <template>
    <div>
      <!-- named slot -->
      <slot name="header" />
      <slot />
    </div>
  </template>
  ```
</CodeGroup>

## Layout's Ref

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

<CodeGroup>
  ```vue [app/app.vue] theme={null}
  <script setup lang="ts">
  const layout = ref()

  function logFoo () {
    layout.value.layoutRef.foo()
  }
  </script>

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

  ```vue [app/layouts/default.vue] theme={null}
  <script setup lang="ts">
  const foo = () => console.log('foo')
  defineExpose({
    foo,
  })
  </script>

  <template>
    <div>
      default layout
      <slot />
    </div>
  </template>
  ```
</CodeGroup>