Nesting multiple dynamic routes in Nuxt
I am currently in the process of scoping out a migration of our current Web Application to Nuxt 4, trying to figure out what works of the current design, and what might end up being a breaking change.
I am currently looking at the routing, and would like confimation that my thinking is correct.
Each section of the application follows the same general pattern, where we have a Search Page, followed by the search result, which might have serval pages.
The following is the example route for teh Job section
The route
\jobs\ correctly shows the [jobs].vue component
I am assuming that if I want to get content from jobs\job\[id]\ to show then I will need to add a <NuxtPage \> to [jobs].vue and have a v-if based on route to decide if I am targeting \jobs or a route below
Is that correct?3 Replies
Hi @dankell.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your understanding is mostly correct, but there are a few clarifications based on Nuxt's routing system:
- In Nuxt 3 (and likely Nuxt 4, as the routing system is not expected to change fundamentally), nested routes are created by the directory structure inside the
- Use
See Dynamic Routes Example ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
pages/ directory. To display child routes, you use the <NuxtPage /> component in the parent page component.
- If you want /jobs to render [jobs].vue, and /jobs/job/[id]/summary to render the corresponding nested page, you should structure your pages/ directory accordingly and use <NuxtPage /> in the parent component to render the child routes.
However, your example structure is a bit off for Nuxt's conventions. For dynamic routes, you should use square brackets for the dynamic segment, e.g., [id].vue. Also, the parent file for /jobs should be jobs/index.vue (not [jobs].vue), and the nested structure should look like this:
In jobs/index.vue, you can include <NuxtPage /> to render nested routes. You do not need a v-if to check the route; Nuxt will automatically render the correct child component based on the route. If you want to display something only on the /jobs route, you can do so in index.vue. The child routes will only be rendered when their respective paths are matched.
Example:
pages/jobs/index.vue
This setup will render the search page at /jobs, and when you navigate to a nested route like /jobs/job/123/summary, Nuxt will render the corresponding child component inside the <NuxtPage /> slot.
For more details and examples, see the official documentation on nested routes and dynamic routes in Nuxt.
If you want more control over when <NuxtPage /> is re-rendered (for example, for transitions), you can use the page-key prop or definePageMeta as described in the docs.
In summary:- Use
index.vue for the /jobs route.
- Use nested folders and [id].vue for dynamic segments.
- Use <NuxtPage /> in the parent to render children; no need for manual v-if checks for routing.
See Nested Routes ExampleSee Dynamic Routes Example ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@602890303753682944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I'm assuming that the
v-if will need to be used in order to show different content (i.e. search results) on the \jobs route to the \jobs\job\[id] route which will be showing details.
Something like: