In this episode, we dive into how pages work in Nuxt and see just how different it is from a regular Vue project. Instead of setting up Vue Router and manually mapping routes to components, Nuxt handles routing for you automatically with its convention-over-configuration approach.
We start by creating a pages
folder (which you may have to do yourself in Nuxt 3), and then see how simply adding .vue
files inside this folder instantly registers new routes in the app. For example, adding index.vue
makes it your homepage, while adding about.vue
sets up an /about
route—no extra code needed!
Next, we look at nested pages. By creating subfolders (like pages/todos/index.vue
), we’re able to easily generate routes like /todos
and even deeper ones (e.g., pages/todos/create.vue
gives you /todos/create
).
We also cover a little debugging—sometimes you have to restart your dev server when adding or removing pages, especially with Nuxt 3 in its early days.
Overall, you'll see how painless and quick it is to set up static and nested pages, and get a feel for how Nuxt’s auto-routing fills in for what you'd usually do with Vue Router.