Pages and Components

Pages

The first additional directory that we’ll cover is pages. They are significant because, along with creating our app’s views, they are also a key part of navigating our project. Examples of pages could be the “Home,” “About Us,” and “Contact Us,” pages or any view we might switch to.

How this compares with Vue.js

The pages folder in Vue.js is often called views. Typically, the contents of the views folder are simply for organizing our pages for routing (i.e., switching between pages). We would then need to install and set up a routing package and inform the router which view to display for each URL. For example, https://myproject.com/about will render the contents of the About.vue file. This is all set up in a configuration file.

Nuxt does this for us!

With Nuxt, we don’t need to worry about this configuration. Any .vue files we add to the pages directory will be automatically assigned a URL. For example, pages/about.vue will be displayed when we visit https://myproject.com/about.

Using the pages directory

To get started, we first create a pages directory inside our project. Then, we have two options:

1. Inside the pages directory, we add an app entry point (home page) with pages/index.vue. This then requires the <NuxtPage /> component to be added to app.vue to declare where we want the pages to appear. We run the following code to see the contents of pages/index.vue: