<NuxtLayout>
You can use <NuxtLayout /> component to activate the default layout on app.vue or error.vue.
```vue [app/app.vue]
:read-more{to="/docs/4.x/directory-structure/app/layouts"}
## 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 [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) directory, or `false` to disable the layout.
- **type**: `string | false`
- **default**: `default`
```vue [app/pages/index.vue]
<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 />.
::
```vue [error.vue]
::read-more{to="/docs/4.x/directory-structure/app/layouts"}
Read more about dynamic layouts.
::
- `fallback`: 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/`](/docs/4.x/directory-structure/app/layouts) directory.
- **type**: `string`
- **default**: `null`
## 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]
<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]
## Layout Props from Page Meta
When using [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) with the object syntax for `layout`, props are automatically passed to the layout component. The layout can receive them with `defineProps`:
```vue [app/pages/dashboard.vue]
<script setup lang="ts">
definePageMeta({
layout: {
name: 'admin',
props: {
sidebar: true,
},
},
})
</script>
```vue [app/layouts/admin.vue]
::read-more{to="/docs/4.x/directory-structure/app/layouts#passing-props-to-layouts"}
Read more about passing props to layouts.
::
## 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.
::code-group
```vue [app/pages/index.vue]
<template>
<div>
<NuxtLayout name="custom">
<template #header>
Some header template content.
</template>
</NuxtLayout>
</div>
</template>
```vue [app/layouts/custom.vue]
::
:read-more{to="/docs/4.x/getting-started/transitions"}
## Layout's Ref
To get the ref of a layout component, access it through `ref.value.layoutRef`.
::code-group
```vue [app/app.vue]
<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]
```
::
:read-more{to="/docs/4.x/directory-structure/app/layouts"}