foundation
File-based routing
Map the pages directory to routes, dynamic params, nested routes, layouts, middleware, and route metadata.
Nuxt derives routes from `pages/`: `index.vue` → `/`, `about.vue` → `/about`, `[id].vue` → dynamic segment, `[...slug].vue` catch-all. Nested folders create nested paths; `layouts/` wrap pages; `middleware/` runs before navigation.
Route rules and `definePageMeta` attach middleware, layout choice, and auth flags colocated with the page file.
<!-- pages/users/[id].vue -->
<script setup>
const route = useRoute();
// route.params.id
</script>
On interviews: contrast with manual Vue Router config, route groups (if used), and how layouts preserve state across child navigations.
Common pitfalls: wrong dynamic param names, middleware with blocking IO on every navigation, and duplicate page paths from parallel folder experiments.
The trade-off is convention-over-configuration speed versus learning Nuxt-specific routing rules.
Checklist:
- Know bracket dynamic and catch-all rules.
- Colocate meta with pages.
- Separate layout concerns from page data.
- Lazy components via dynamic import when heavy.