Nested Routes

A parent .vue file alongside a folder of children produces nested routes — the parent embeds another NuxtPage outlet.

4 min read Level 2/5 #nuxt#routing#nested

What you'll learn

Pair a parent file with a child folder
Embed a NuxtPage outlet in the parent
Share chrome across a section of the site

Layouts share UI across the whole app. Nested routes share UI across a section. Pair a parent .vue file with a folder of the same name and Nuxt nests the children inside the parent.

The File Pattern

pages/
├─ dashboard.vue          # parent wrapper
└─ dashboard/
   ├─ index.vue           → /dashboard
   ├─ settings.vue        → /dashboard/settings
   └─ billing.vue         → /dashboard/billing

pages/dashboard.vue does not become a route on its own — it becomes the wrapper for everything under /dashboard/*.

The Parent

The parent renders shared chrome and uses another NuxtPage as the slot for the active child:

<!-- pages/dashboard.vue -->
<template>
  <div class="dashboard">
    <aside>
      <NuxtLink to="/dashboard">Overview</NuxtLink>
      <NuxtLink to="/dashboard/settings">Settings</NuxtLink>
      <NuxtLink to="/dashboard/billing">Billing</NuxtLink>
    </aside>

    <section>
      <NuxtPage />
    </section>
  </div>
</template>

A Child

<!-- pages/dashboard/settings.vue -->
<template>
  <h1>Settings</h1>
  <p>Tweak preferences for your account.</p>
</template>

Visiting /dashboard/settings mounts the parent’s wrapper around the settings page. Navigating between siblings (/dashboard to /dashboard/billing) keeps the parent mounted — its state, scroll position, and animations persist.

When to Use Nested Routes

Reach for them whenever a section needs its own navigation, header, or persistent state:

Dashboards with a fixed sidebar.
Tabs that share data fetched once at the parent level.
Settings pages where the parent loads the user record and children edit slices of it.

If you only need site-wide chrome (header, footer), prefer a regular layout. Nested routes are for section-scoped wrappers.

definePageMeta →