---
title: "Layouts & Navigation"
description: "Build the default layout with a navigation bar and footer, learn how Nuxt layouts differ from Next.js layout files, and wire up NuxtLink for client-side navigation."
canonical_url: "https://vercel.com/academy/nuxt-on-vercel/layouts-and-navigation"
md_url: "https://vercel.com/academy/nuxt-on-vercel/layouts-and-navigation.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-05-03T12:56:03.325Z"
content_type: "lesson"
course: "nuxt-on-vercel"
course_title: "Nuxt on Vercel"
prerequisites: []
---
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
# Layouts & Navigation
# Layouts & Navigation
In Next.js, layouts are `layout.tsx` files that live next to the routes they wrap. You can nest them, and each one inherits from its parent. The mental model is inheritance: every route composes its layout from the chain of `layout.tsx` files above it in the folder tree.
Nuxt takes a named-slot approach instead. Layouts live in `app/layouts/`, and every page uses the `default.vue` layout unless it opts into a different one. There's no folder nesting, no implicit inheritance. A page picks its layout, and that's the end of the story.
The starter already has a basic layout. We're going to understand how it works, then update it so the navigation actually reflects the pages we've built.
## Outcome
Build a shared layout with a header, navigation links, and a footer that wraps every page.
## Fast Track
1. Review `app/layouts/default.vue` and understand the `` pattern
2. Add navigation links to all public pages
3. Verify the layout persists across page transitions
## Hands-on exercise 1.4
Update the default layout to include navigation links to the browse page and a placeholder for auth links we'll add later.
**Requirements:**
1. Review how `app.vue` connects to the layout system via `` and ``
2. Update `app/layouts/default.vue` with a header containing the site title and navigation links
3. Include a `Browse` link that points to `/springs`
4. Add a placeholder comment where auth links will go in Section 3
5. Include a footer
**Implementation hints:**
- `` in a layout is where the page content renders. It's the equivalent of the `{children}` prop in a Next.js `layout.tsx`
- `` in `app.vue` tells Nuxt to use the layout system. `` renders the matched page inside that layout
- Every page gets the default layout automatically. You don't need to import it or specify it unless you want a different layout
Let's start with `app.vue`, the entry point:
```vue title="app/app.vue"
```
Two components, four lines. `NuxtLayout` finds the right layout (defaulting to `default.vue`), and `NuxtPage` renders the matched page inside it. In Next.js, this wiring is implicit. The framework handles it behind the scenes. In Nuxt, you opt in explicitly, which means you can also opt out. An `app.vue` without `NuxtLayout` would render pages with no layout at all.
Now the layout itself. Here's the React equivalent, for orientation:
```tsx
// Next.js layout.tsx — for comparison
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
And the Nuxt version:
```vue title="app/layouts/default.vue"
```
The `` inside the `` tag is where the magic happens. Whatever page the router matches gets rendered there. In React terms, it's `{children}`. The difference is that Vue uses a dedicated element rather than a prop, which means you can have multiple named slots in a single layout. We won't need that for this project, but it's a pattern worth knowing exists.
Notice there's no `