Vue.js: What is file-based routing in Nuxt 3?

File-based routing — routes from file structure.

Structure:

• pages/index.vue → /
• pages/about.vue → /about
• pages/posts/[id].vue → /posts/:id

1<!-- pages/posts/[id].vue -->
2<template>
3    <div>
4        <h1>Post {{ id }}</h1>
5    </div>
6</template>
7
8<script setup>
9const route = useRoute()
10const id = route.params.id
11</script>

Nested routes:

• pages/posts/index.vue → /posts
• pages/posts/[id].vue → /posts/:id

Dynamic routes:

• [id] — dynamic segment.
• [...slug] — catch-all.