Nuxt 3 - add pages

In this article, we would like to show you how to add pages in Nuxt 3.

1. Modify project structure

In order to create new pages / routing in your project, you need to modify the project structure to have all the pages inside one directory.

1. Create new pages/ folder in the root directory. From now, inside the pages/ folder you can create different files, where each file represents a different page (route).
2. Rename app.vue file to index.vue and move it into the pages/ folder. From now pages/index.vue file will represent the home page of your application with the '/' route.

2. Creating new pages (routes)

Inside the pages/ folder you can create different files where each file would represent a different page and route. Nuxt 3 will automatically set the route to the file name.

3. Practical example

Creating about.vue component inside this pages/ folder, would create a route for this page which would just be /about (http://localhost:3000/about).

VS Code preview:

Web browser preview: