`<NuxtLayout>`

Wraps page content with a layout from the layouts/ directory.

Since Nuxt 3.0 Spec ↗

Syntax

<NuxtLayout :name="layout"> ... </NuxtLayout>

Parameters

Name	Type	Required	Description
`name`	`string \| Ref<string>`	No	Layout file name to use (default: `default`).

Returns

Component — Renders the chosen layout around the slotted content.

Examples

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// Choose layout per page
definePageMeta({ layout: 'admin' })
</script>

Notes

Layouts live in `layouts/` and render their page via `<slot />`. The active layout is usually chosen with `definePageMeta({ layout })` or `setPageLayout()`. Use `layout: false` in page meta to opt out of any layout.