File-Based Routing

Nuxt generates the router automatically from the pages folder layout — there is no central route table to edit.

4 min read Level 1/5 #nuxt#routing

What you'll learn

Map filenames to URLs
Nest folders for nested URLs
Use index.vue to define a folder's root URL

Nuxt’s router is generated for you. Drop a .vue file into pages/ and a route appears. No router.ts, no route arrays, no manual lazy imports.

The Filename Rules

pages/
├─ index.vue              → /
├─ about.vue              → /about
├─ contact.vue            → /contact
└─ blog/
   ├─ index.vue           → /blog
   ├─ hello.vue           → /blog/hello
   └─ tags.vue            → /blog/tags

Two rules cover almost everything:

A folder name becomes a URL segment.
index.vue inside a folder represents that folder’s root URL.

Building a Small Site

<!-- pages/index.vue -->
<template>
  <h1>Welcome</h1>
  <ul>
    <li><NuxtLink to="/blog">Blog</NuxtLink></li>
    <li><NuxtLink to="/about">About</NuxtLink></li>
  </ul>
</template>

<!-- pages/blog/index.vue -->
<template>
  <h1>All posts</h1>
  <NuxtLink to="/blog/hello">Hello world</NuxtLink>
</template>

<!-- pages/blog/hello.vue -->
<template>
  <h1>Hello world</h1>
  <p>This is the first post.</p>
</template>

Typed Routes

Turn on experimental.typedPages in nuxt.config.ts and useRoute() will know the exact set of valid paths. NuxtLink to="..." becomes autocomplete-aware too — typos at compile time, not in production.

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: { typedPages: true },
})

Dynamic Routes →