Breaking out of nested page layouts
Say I have this pages structure:
users.vue renders NuxtPage so it creates a nested page layout for the pages in the users folder.
I want want to keep the /users/invite route, but I don't want invite.vue to inherit the users.vue layout.
In Svelte I could use @ to break out of the parent layout: +page@.svelte. Is there something similar in Nuxt, or is my only option to check the current route and render NuxtChild for the other pages only?4 Replies
Hi @Gyen Abubakar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Nuxt does not provide a built-in mechanism (like Svelte's
- There is no built-in or file-based way in Nuxt to break a nested page out of its parent layout. - The recommended approach is to conditionally render
@ convention) to break out of a parent page layout in nested routes. In your example, if you have a structure like:
and users.vue renders <NuxtPage />, then all child pages (/users/permissions, /users/invite, etc.) will be rendered inside the layout defined in users.vue.
To exclude a specific nested page (e.g., /users/invite) from inheriting the parent layout, Nuxt does not offer a direct file naming or directory convention to "break out" of the parent. The only documented approach is to conditionally render <NuxtPage /> in users.vue based on the current route, so that you can skip rendering the child for certain routes. This means you would need to check the route in users.vue and avoid rendering <NuxtPage /> for /users/invite, effectively preventing the parent layout from wrapping that page.
There is no mention in the official documentation or community discussions of a shortcut or special file naming (like Svelte's @) to achieve this in Nuxt. The closest workaround is to manipulate the route tree programmatically using hooks like pages:extend, but this is more advanced and not a direct equivalent to Svelte's approach. For example, you could use a custom Nuxt module to adjust the route structure, as shown in a community example, but this is not a standard or recommended pattern for most use cases Exclude pages in nested routes.
Summary:- There is no built-in or file-based way in Nuxt to break a nested page out of its parent layout. - The recommended approach is to conditionally render
<NuxtPage /> in the parent page based on the route, or restructure your pages if possible.
- Advanced users can manipulate the route tree with hooks, but this is not a direct or simple solution.
If you need more granular control, consider restructuring your pages or using route middleware to redirect or render layouts as needed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@795348437741731880> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hey.
That is what the index.vue in users is going to do though?
list of users
I resorted to conditionally rendering
NuxtPage