In Nuxt, creating a new page is simple because routing is automatically handled based on the file structure inside the app/pages/ directory. In this guide, we will see how to create a new page and access it via a browser route.

First, navigate to the pages folder in your Nuxt project. Create a new .vue file with the desired page name. For example, if you want a page at /about, create:

app/pages/about.vue

Inside about.vue, you can add a basic page structure:

<template>
  <div>
    <h1>About Us</h1>
    <p>This is the about page.</p>
  </div>
</template>

Once saved, Nuxt will automatically create the route /about for you.

To create a dynamic route (e.g., /blog/1, /blog/2), create a file with square brackets inside app/pages/:

app/pages/blog/[id].vue

In this file, you can use useRoute() to get the parameter:

<script setup>
const route = useRoute();
const id = route.params.id;
</script>

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

Nuxt automatically code-splits pages, so lazy loading is built-in. If you’re using definePageMeta() or custom layouts, you can still keep page loading optimized without extra configuration.

To navigate to your new page, use the <NuxtLink> component:

<NuxtLink to="/about">About Us</NuxtLink>

Tip: Since Nuxt uses file-based routing, you don’t need to manually edit a routes file — the folder and file structure automatically define routes.