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.

Components

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.

Pages

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?)

Layouts

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 />
</NuxtLayout>

• Using definePageMeta to choose which layout a page is using:

definePageMeta({
  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
<template>
  <div>
    <header>
      <nav><NuxtLink to="/">Home</NuxtLink></nav>
    </header>

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

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.