How to Create Nuxt Pages: A Complete Guide for Beginners

How to Create Nuxt Pages: A Complete Beginner’s Guide

Nuxt.js is a powerful framework built on top of Vue.js that makes developing server-side rendered (SSR) and static web applications much easier. In this tutorial, we will walk through how to create pages in Nuxt.js, understand its automatic routing system, and some best practices for managing your pages effectively.

Prerequisites

Basic knowledge of JavaScript and Vue.js.
Node.js and npm installed on your computer.
A Nuxt.js project set up already. (If you want to start fresh, see How to Install Nuxt.js: A Step-by-Step Tutorial for setup instructions.)

Step 1: Understanding the Pages Directory in Nuxt

Nuxt.js automatically generates the application routes based on the Vue files inside the pages directory. Every .vue file inside this folder represents a route. This convention-over-configuration approach eliminates the need to manually configure routes.

pages/index.vue will map to the root route /.
pages/about.vue will map to /about.
Filenames with nested directories will create nested routes.

Step 2: Creating a Simple Static Page

Let’s create a simple page named about.vue. Inside your pages folder, create a new file about.vue with the following sample code:

<template>
  <div>
    <h1>About Page</h1>
    <p>Welcome to the about page of our Nuxt app.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

This page will automatically be accessible at /about in your running Nuxt app.

Step 3: Nested Pages and Dynamic Routes

You can organize pages in subfolders inside the pages directory to create nested routes:

For example, pages/blog/index.vue corresponds to /blog.
Adding a file pages/blog/post.vue will map to /blog/post.

Dynamic routes help capture parameters from URLs. For a dynamic blog post route, create a file named pages/blog/_id.vue:

<template>
  <div>
    <h1>Blog Post {{ id }}</h1>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    return { id: params.id };
  }
}
</script>

This page will match routes like /blog/1, /blog/hello-world, etc., where id is the dynamic segment.

Step 4: Using Layouts with Your Pages

Nuxt also supports layouts to wrap your pages with common templates. The layouts directory contains Vue files for layouts. You can specify a layout by adding layout: 'layoutname' in your page component.

Step 5: Running Your Nuxt Application

If your Nuxt app isn’t running yet, start it by running:

npm run dev

Now open http://localhost:3000/about and see your new page in action.

Troubleshooting Tips

Make sure your Vue files inside the pages directory have the .vue extension.
Check that file and folder names do not contain typos or invalid characters.
If dynamic routing doesn’t work, verify the parameter naming convention uses underscore prefix (e.g., _id.vue).
Restart the development server if new pages or routes don’t appear immediately.

Summary Checklist

Create your .vue page files inside the pages folder.
Use nested folders for nested routes.
Use underscore-prefixed filenames for dynamic routes.
Specify layouts if you need custom page wrappers.
Run your app with npm run dev to test pages.

For additional context on setting up Nuxt.js, check our post on How to Install Nuxt.js: A Step-by-Step Tutorial.

This tutorial serves as your starting point for building well-structured Nuxt applications with clean routing and page management. With practice, creating dynamic and flexible Nuxt apps becomes a straightforward task.