Pages — File-Based Routing

Every .vue file under pages/ becomes a route. Nested folders produce nested URLs — no router config required.

4 min read Level 1/5 #nuxt#pages#routing

What you'll learn

Create pages/index.vue and pages/about.vue
Nest folders to create nested URLs
Recognize that adding pages/ enables the router automatically

The moment you create a pages/ folder, Nuxt activates Vue Router and starts mapping files to URLs. There is no central route table — the filesystem is the route table.

Your First Two Pages

<!-- pages/index.vue -->
<template>
  <h1>Home</h1>
  <NuxtLink to="/about">About</NuxtLink>
</template>

<!-- pages/about.vue -->
<template>
  <h1>About</h1>
  <NuxtLink to="/">Home</NuxtLink>
</template>

Visiting / renders index.vue and /about renders about.vue. Navigation between them is client-side and instant.

The Mapping Rules

The file-to-URL conversion is mechanical:

pages/index.vue           → /
pages/about.vue           → /about
pages/blog/index.vue      → /blog
pages/blog/hello.vue      → /blog/hello
pages/blog/[slug].vue     → /blog/:slug   (dynamic)
pages/docs/[...slug].vue  → /docs/*       (catch-all)

index.vue inside a folder represents that folder’s root URL. Plain filenames become path segments.

Don’t Forget NuxtPage

If you create pages/ but see nothing on screen, your app.vue is probably missing the router outlet. Make sure it includes:

<template>
  <NuxtPage />
</template>

This is also where you would add a NuxtLayout wrapper. From here on we will build out dynamic routes, layouts, and middleware.

Layouts →