Layouts

A layout is a reusable wrapper around pages — perfect for headers, footers, navigation rails, and anything you want to keep mounted across route changes.

The Default Layout

Create layouts/default.vue and Nuxt applies it to every page that doesn’t opt out.

<!-- layouts/default.vue -->
<template>
  <div class="app">
    <header>
      <NuxtLink to="/">jsschools</NuxtLink>
    </header>

    <main>
      <slot />
    </main>

    <footer>© 2026</footer>
  </div>
</template>

The <slot /> is where the active page renders. To activate layouts, make sure app.vue includes NuxtLayout:

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

Switching Layouts Per Page

Use definePageMeta inside a page’s <script setup> to pick a non-default layout:

<!-- pages/login.vue -->
<script setup lang="ts">
definePageMeta({ layout: 'auth' })
</script>

<template>
  <form>...</form>
</template>

Nuxt will look for layouts/auth.vue. Pass layout: false to render the page with no layout at all (handy for embeds and print views).

Multiple Layouts in One App

A typical app has a marketing layout for public pages, an app layout for the authenticated dashboard, and a bare auth layout for sign-in.

layouts/
├─ default.vue   # marketing
├─ app.vue       # authenticated shell
└─ auth.vue      # sign-in / sign-up

Pages choose by name, and Nuxt handles the swap with a smooth transition.