Pages vs. Layouts vs. Components

In our Nuxt apps we have three main ways to get content rendered

Michael Thiessen
Nuxt 3

Mastering Nuxt 3 course is here!

Get notified when we release new tutorials, lessons, and other expert Nuxt content.

Click here to view the Nuxt 3 course

In our Nuxt apps we have three main ways to get content rendered:

Pages, layouts, and components.

The big question here is: which one should we use, and when?

That’s what we’ll cover in this article.

First, we’ll look at each type individually to see what makes them different. Then we’ll look at a basic strategy that we can implement to help us decide where logic should go.


One thing to keep in mind is that pages and layouts are ultimately just Vue components.

Nuxt adds some extra magic to them, but underneath it all they’re Vue components that we’re used to working with.


To understand where to put our code and when, we need to understand the special abilities that Nuxt 3 gives to Pages and Layouts.

Pages get the special ability of defining our routes.

Without pages, we don’t have any routes, and we don’t really have much of an app. So these are the foundation on which we build our application.

(Yes, we can build apps without using the /pages directory and NuxtPage component, but most of you won’t be taking this route… see what I did there?)


The main purpose of Layouts are to extract repeated parts of pages into a single place. This is for code readability and maintainability, but also for performance reasons.

Layouts get deep support for configuration. There are numerous ways to tell Nuxt which layout to use:

  • Statically defining layouts in our templates:
<NuxtLayout name="authenticatedLayout">
  <NuxtPage />
  • Using definePageMeta to choose which layout a page is using:
  layout: 'authenticatedLayout'
  • Integration with Nuxt Content so each Markdown page can override the layout being used:
layout: blog

# The Best Blog Post Ever

Layouts also benefit from convention.

Sure, we could put everything that we put in a layout into a regular component instead. But that’s not how Nuxt apps are built.

By being consistent in how we extract repeated page functionality, we make it easier for all Nuxt developers to work on our app — and for me to teach you about it!

My own strategy

This is how I think about building my apps:

  1. Default to Pages → the foundation of our Nuxt apps
  2. Move repeated pieces into Layouts
  3. Smaller, isolated pieces of functionality are moved into components

When you’re first writing a feature, the main goal is just to get the thing to work. For that, I would likely keep my code inside of a Page.

As more and more functionality is added to your app, repeated sections will start to emerge. Those repeated parts can be extracted out into Layouts.

Smaller, independent pieces of functionality can be moved into components instead. These will come from both Pages and Layouts.

Layout vs. Components

Sometimes it’s clear that code shouldn’t be in a Page — but knowing whether it should be moved into a Layout or a Component can be a bit trickier.

One question to ask is this:

Where would you expect to find that code?

For example, code for a header is usually found in a Layout. So put that in a Layout, not a Component:

// layouts/default.vue
      <nav><NuxtLink to="/">Home</NuxtLink></nav>

        <slot />

I like to think of Components as serving a single purpose, whereas Layouts can often do multiple things. Often, Layouts will include a header and a footer, and maybe some other functionality too.

Use your own judgment

Ultimately, this comes down to exercising your own judgment.

There’s no “right” answer when it comes to organizing code like this, and it’s highly dependent on your specific situation.

But hopefully this strategy gives you a great starting point and some thoughts on how you can approach this better in the future.

Michael Thiessen
Michael is a passionate full time Vue.js and Nuxt.js educator. His weekly newsletter is sent to over 11,000 Vue developers, and he has written over a hundred articles for his blog and VueSchool.

Follow MasteringNuxt on