Share a shell across pages with the layouts directory, render page content with slot, and switch layouts per page.
Why: a layout is UI shared by many pages — a header, nav, footer. app/layouts/default.vue is used automatically by every page. The page’s content appears wherever you put <slot />.
<!-- app/layouts/default.vue -->
<template>
<div>
<header>My Site</header>
<main>
<slot />
</main>
</div>
</template>Why: layouts only apply when app.vue renders <NuxtLayout> around <NuxtPage />. With that in place, the default layout wraps every page with no extra work.
<!-- app/app.vue -->
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>Why: some sections need a different shell. Create another file in layouts/ (e.g. admin.vue) and a page opts into it with definePageMeta. Note: definePageMeta sets per-page settings like which layout to use.
<!-- app/layouts/admin.vue -->
<template>
<div>
<aside>Admin sidebar</aside>
<slot />
</div>
</template><!-- app/pages/admin/index.vue -->
<script setup lang="ts">
definePageMeta({ layout: 'admin' })
</script>
<template>
<h1>Admin dashboard</h1>
</template>