N
Nuxt•3mo ago
Hro

How to opt out of parent inherit?

When I have a nested structure, can I somehow opt-out of the parent <nuxtpage> rendering for a specific page? I need a standalone page at a nested route.
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Hro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt’s file-based routing system automatically nests pages based on your directory structure, so by default, a page at a nested path (e.g., /parent/child) will be rendered inside the parent’s <NuxtPage>. If you want a page at a nested route (like /parent/child) to not be rendered inside the parent’s <NuxtPage>—essentially making it a standalone page—you cannot directly “opt out” using a built-in option. However, there are a couple of approaches discussed in the community: 1. Custom Route Manipulation via Module
You can use the pages:extend Nuxt hook to manipulate the route tree and move a nested page out of its parent, making it a standalone route. Here’s an example module that demonstrates this approach: 
   import { defineNuxtModule } from '@nuxt/kit';

   export default defineNuxtModule({
     meta: {
       name: 'eject-routes',
     },
     async setup(options, nuxt) {
       nuxt.hook('pages:extend', (pages) => {
         // Remove the page generated by Nuxt
         for (const page of pages.values()) {
           if (page.path.match('/path/to/your')) {
             page.children = page.children?.filter(c => c.path !== 'page');
           }
         }

         // Push a new version of the page (not as child of another)
         pages.push({
           name: 'page-name',
           path: '/path/to/your/page',
           file: '~/pages/path/to/your/page.vue',
         });
       });
     },
   });
   
   import { defineNuxtModule } from '@nuxt/kit';

   export default defineNuxtModule({
     meta: {
       name: 'eject-routes',
     },
     async setup(options, nuxt) {
       nuxt.hook('pages:extend', (pages) => {
         // Remove the page generated by Nuxt
         for (const page of pages.values()) {
           if (page.path.match('/path/to/your')) {
             page.children = page.children?.filter(c => c.path !== 'page');
           }
         }

         // Push a new version of the page (not as child of another)
         pages.push({
           name: 'page-name',
           path: '/path/to/your/page',
           file: '~/pages/path/to/your/page.vue',
         });
       });
     },
   });
This allows you to "eject" a nested page and make it standalone, even if it lives in a nested directory structure in your project files. You may need to adapt the logic to your specific use case, but this is the general idea for advanced routing control in Nuxt [Github Issue: Exclude pages in nested routes]. 2. Directory Structure Workaround
Alternatively, you can place the standalone page at the root of the pages directory and name it according to the desired path (e.g., pages/parent-child.vue for /parent/child). However, this can get unwieldy for complex structures. Summary:
There is no built-in “opt-out” flag for parent <NuxtPage> inheritance in Nuxt’s file-based routing. For advanced scenarios, you can use the pages:extend hook to manipulate the route tree and achieve the desired standalone behavior for specific nested routes [Github Issue: Exclude pages in nested routes]. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@385142776674910238> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?