If you've decided to learn Nuxt, there's a good chance, you've come across the views section in the docs. As you probably found, the documentation here's a little sparse. That's why I created this guide to explain the differences and similarities between layouts, pages, components and the default app.vue in Nuxt.

What's app.vue

The default file, this is what you find when creating a new project, is app.vue. This files is like App.vue in vanilla Vue projects. It acts as the main entry point for your app or website.

This file controls where to put your pages, what layout to use, etc., more on that later.

The file is located in the root of your Nuxt project.

What are layouts?

Layouts are common UI elements, that exist on every, or a lot of pages. You can create multiple layouts and choose which page uses which layout and also change them dynamically.

You would, for example, put things like you apps header and footer in here. Using a <slot /> you can pass your pages content through the layout. Here's an example:

<template>
    <div>
    	<Header>
        <slot />
        <Footer>
    </div>
</template>

Layouts are stored in the layouts/ directory. The default layout (the layout, when none is specified) is layouts/default.vue.

In your app.vue, the main vue file, implementing a layout would look like this:

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

Here, NuxtLayout puts your layout file, default.vue in the main project and some page content is passed through the <slot />.

What are pages?

Pages are the sites of your application or website. This could, for example, be the about section or the contact page. Nuxt comes with vue-router built in, unlike vanilla vue where you'd have to install it. Nuxt also auto generates the vue-router configuration.

Pages look like normal vue components and basically hold the content for each page. For example:

<template>
  <h1>
    Contact
  </h1>
  <p>
    Feel free to contact me
  </p>
</template>

Pages are stored in the pages/ directory. The default pages are named index.vue. That means if you access /, you'll open the page pages/index.vue. You can create suburls like example.com/about by creating a folder in this directory: pages/about. Here the page for example.com/about is pages/about/index.vue.

To start using pages in your app, use <NuxtPage /> in your app.vue:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Here you pass the pages through your layout. Pages will dynamically change, when using <NuxtLink>, the Nuxt version of <RouterLink>.

What are components?

If you've already learnt how to code vue applications, then components won't be anything new for you. They're simply reusable UI designs and functional parts of your website, like a comments section. Rather than writing that code multiple times, you simply reuse it, with components.

Components can look like a page but also like basically anything you want:

<template>
  <p>
    some component content
  </p>
</template>

Components are stored in components/. You can choose a name.

To access them in any <template> use their name. For example for the file components/Footer.vue:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
  <Footer />
</template>

To access components in subdirectorys such as components/foo/boo/Comments.vue use the name <FooBooComments />.

If I have helped you, consider signing up for free to get access to all my guides and my newsletter.