Here’s a different way to think about nested routes in Nuxt.
Nesting child routes within other routes can get very complicated very quickly.
It’s hard to wrap your head around, and sometimes reading through the docs isn’t enough.
Here’s another approach that might make it click for you.
Thinking with Folders
You can think of routes like a folder hierarchy. For example, the route
/one/two/three is equivalent to this folder structure:
one/ - two/ - - three/
When we combine multiple components together we get a different kind of hierarchy, this time made with components:
// ComponentA <template> <ComponentB /> </template>
// ComponentB <template> <ComponentC /> </template>
This component hierarchy ends up looking like this:
ComponentA - ComponentB - - ComponentC
Now that we have two sets of hierarchies, we can start to see how they map together.
Here’s how this works.
Nuxt is trying to map the route to the components as best as it can. It uses the
NuxtPage component to render a page from your app’s
pages/ directory. Adding more
NuxtPage components lets it match to multiple pages in your folder hierarchy.
Let’s take our route
/one/two/three. If we only have a single
NuxtPage in our application, we have to match exactly:
// App.vue <template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template>
This will match the route
/one/two/three against the component
pages/one/two/three.vue. If we’re using a catchall route, we can match against
pages/one/two/[...slug].vue as well.
However, if that page also has a
NuxtPage within it, we can match our route
/one/two/three in more complex ways. This is how we nest child routes — by nesting child components:
// pages/one/two/three.vue <template> <!-- The nested NuxtPage allows for child routes --> <NuxtPage /> </template>
Nesting Components like Folders
You can follow along with this live demo here. You’ll need to click “Open in New Tab” at the top in order to navigate to different routes on the demo app.
If we add in a second
NuxtPage component we now have two chances to match against the filesystem.
To illustrate this, I’ll create this hierarchy in the filesystem:
pages/ - one.vue - one/ - two/ - three.vue
one.vue component looks like this, with a nested
NuxtPage so we can match a second time:
// pages/one.vue <template> One <NuxtPage /> </template>
three.vue looks like this, a regular component with no
// pages/one/two/three.vue <template> Two / Three </template>
If we go to the route
/one we match on
Nuxt is able to match the entire route, so it stops. Only
one.vue is rendered, and nothing is rendered from the second, nested,
However, if we go to
/one/two, we will get a 404. Although we’re able to match the first part of the route
/one against the
one.vue component, we run into some issues.
Nuxt sees that there is another
NuxtPage and continues trying to match. But there is nothing to match the
/one/two portion, so we’re out of luck, and we get a 404.
But if we go to the route
/one/two/three, we get the page
one.vue rendered, with the page
/one/two/three.vue rendered as a child of it!
Nuxt is able to match the entire route to two components now.
Whenever we nest things recursively, whether it’s functions, slots, or routes, it can be very difficult to understand.
This isn’t the only way of understanding nested routes, but hopefully it’s helpful to you!
If you are interested in the opportunity to learn all about Nuxt 3, make sure you register on the Mastering Nuxt website.