File-Based Routing

In a plain Vue + vue-router app, routes live in a config array that you keep in sync with your components by hand. Nuxt removes that file entirely: the structure of the pages/ directory is the route map.

Files become routes

index.vue inside a folder matches that folder's own path, the same way index.html works on a web server. There's nothing to register — creating pages/pricing.vue and saving the file is enough for /pricing to work the next time you navigate to it.

Dynamic segments with square brackets

A file or folder name wrapped in square brackets becomes a dynamic route parameter:

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
// route.params.slug holds whatever the URL segment was
</script>

<template>
  <h1>Post: {{ route.params.slug }}</h1>
</template>

useRoute() is a Nuxt/Vue Router composable, available without an import, that gives you the current route's params, query string, and path. Visiting /blog/hello-world renders this page with route.params.slug equal to "hello-world".

Catch-all routes

A double-bracket, ellipsis-style name catches any number of remaining segments:

<script setup>
const route = useRoute();
// for /docs/guide/setup, route.params.slug is ["guide", "setup"]
</script>

This is the pattern used for things like documentation sites, where the number of path segments isn't fixed in advance.

Why file-based routing is worth the trade-off

The obvious objection is: doesn't hiding route definitions in a folder structure make it harder to see all your routes at a glance? In practice the opposite tends to be true — the file tree already mirrors your site's structure, so there's no second source of truth to keep updated. Rename a page, move the file; there's no router config to forget. The next lesson covers layouts/, which lets multiple pages share a common shell (header, sidebar, footer) without repeating markup in every page file.