Nuxt Layouts — Reusable Page Templates in Nuxt 3

In this tutorial, you will learn about Nuxt Layouts. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Nuxt 3 layouts: creating reusable page wrappers with headers, footers, and sidebars, and applying layouts to pages dynamically.

In this lesson, you'll understand how layouts work in Nuxt 3, how to create custom layouts, and how to apply them to different pages.

What You'll Learn

How to create layout components, set default layouts, override layouts per page, and use multiple layouts in one application.

Why It Matters

Layouts prevent duplicating navigation, footer, and sidebar code across pages. They provide consistent structure and make global changes easy.

flowchart TD
    A[layouts/default.vue] --> B[Navigation]
    A --> C[ - Page Content]
    A --> D[Footer]
    E[layouts/auth.vue] --> F[Auth Sidebar]
    E --> G[ - Auth Content]
    style A fill:#00dc82,color:#fff
    style E fill:#00855a,color:#fff

Default Layout

Create layouts/default.vue:

<template>
  <div>
    <header>
      <nav>
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/about">About</NuxtLink>
        <NuxtLink to="/blog">Blog</NuxtLink>
      </nav>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <p>&copy; 2026 My Nuxt Site</p>
    </footer>
  </div>
</template>

Output: Every page without an explicit layout uses default.vue. Page content renders inside <slot />.

Custom Layout

Create layouts/auth.vue:

<template>
  <div class="auth-layout">
    <aside class="sidebar">
      <nav>
        <NuxtLink to="/auth/login">Login</NuxtLink>
        <NuxtLink to="/auth/register">Register</NuxtLink>
        <NuxtLink to="/auth/forgot">Forgot Password</NuxtLink>
      </nav>
    </aside>

    <main>
      <slot />
    </main>
  </div>
</template>

<style scoped>
.auth-layout { display: flex; }
.sidebar { width: 250px; padding: 20px; background: #f5f5f5; }
</style>

Applying Layouts

Set the layout per page with definePageMeta:

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

<template>
  <div>
    <h1>Login</h1>
    <form>...</form>
  </div>
</template>

Output: The login page uses the auth layout instead of the default one.

Dynamic Layouts

Change layouts based on conditions:

<script setup>
const route = useRoute();

// Choose layout based on route
const layout = route.path.startsWith('/admin') ? 'admin' : 'default';
</script>

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

Nested Layouts

Combine multiple layouts:

<!-- layouts/admin.vue -->
<template>
  <div class="admin-layout">
    <AdminSidebar />
    <div class="content">
      <!-- This slot renders the page or a child layout -->
      <slot />
    </div>
  </div>
</template>

Common Mistakes

1. Not creating layouts/ directory: Nuxt looks for layouts in the layouts/ folder. Missing directory means no layouts.
2. Forgetting <slot />: Without slot, page content doesn't render. Always include <slot /> in layout templates.
3. Using definePageMeta outside pages: definePageMeta only works in pages/ directory components.
4. Not scoping layout styles: Layout CSS affects all pages. Use <style scoped> to prevent style leakage.
5. Overriding default layout everywhere: Only override when needed. Most pages should use the default layout.

Practice Questions

1. Where do layout files live? Answer: In layouts/. layouts/default.vue is the default layout applied to all pages.

2. How do you render page content inside a layout? Answer: Use the <slot /> component. It's replaced by the page content.

3. How do you apply a specific layout to a page? Answer: Use definePageMeta({ layout: 'layout-name' }) in the page's <script setup>.

4. What happens if a layout file doesn't exist? Answer: Nuxt falls back to layouts/default.vue. If that's also missing, pages render without a layout wrapper.

Challenge

Create three layouts: default (with header and footer), blog (with sidebar for recent posts and tags), and admin (with admin navigation and no footer). Apply them to appropriate pages.

Mini Project

Build a site with: a public section using the default layout (home, about, contact), a blog section using the blog layout with sidebar, and an admin dashboard using the admin layout.

FAQ

What's Next

Learn about Nuxt Components for auto-imported components and building reusable UI in Nuxt 3.