Exclude nested component from children (Nuxt routing)

Question

is possible to exclude some nested components in pages directory from children of parent component? I need some nested components (nested-a and nested-b) render inside of parent component (_id.vue) and some nested components (standalone-nested) use as standalone pages which isn't rendered inside _id.vue, only use parent in route.

So my goal is to achieve these routes:

/account/{id} - main page
/account/{id}/standalone-nested - standalone page, not rendered inside parent
/account/{id}/nested-a and /account/{id}/nested-b - nested components rendered inside parent

This is my directory tree:

pages
├── account
│   ├── _id
│   │   ├── nested-a.vue
│   │   ├── nested-b.vue
│   │   └── standalone.vue
│   ├── _id.vue
│   └── index.vue
└── index.vue

which generates following router:

{
    path: "/en/account/:id",
    component: _45553d28,
    name: "account-id___en",
    children: [{
      path: "nested-a",
      component: _7b67c342,
      name: "account-id-nested-a___en"
    }, {
      path: "nested-b",
      component: _7b75dac3,
      name: "account-id-nested-b___en"
    }, {
      path: "standalone",
      component: _6884b488,
      name: "account-id-standalone___en"
    }]
  }

in my parent component _id.vue I am using <NuxtChild /> to ensure rendering of nested components inside this component, but I don't know how to tell to nuxt which nested components render only inside this tag.

This is my MWE: https://github.com/DenisStephanov92/nuxt-routing-sample

Thank you for any advice.

@Chandan hi, thank you for effort, I added link to MWE on github — Denis Stephanov
@DenisStephanov shouldn't this _id.vue be inside _id folder with name id.vue!! — Hardik Shah

kissu kissu · Accepted Answer · 2021-01-20T02:09:52

Not sure if I quite get what you want to achieve but I did 2 buttons:

main page button: conditionally rendering the standalone rather than the tabs, but still keeping the view into it's parent (path ends with standalone-nested)
real external button: totally unrelated page, but which can still be accessed on the path that you wish, right now it's on external-standalone-nested but you can simply change it. For that, go to external-standalone.vue and change it in the <router></router> part.

All of this is doable thanks to the @nuxtjs/router-extras package.
I hope it helps you somehow. Of course, you could tinker it to have a specific layout for the standalone vs the non-standalone display.
You can of course move the external-standalone.vue file into the account directory too, if you want to have the _id.vue at the same level.

I hosted the solution on Codesandbox and my commit - starting from your forked sample - can be found on Github.

EDIT: I've commited again. Removed useless comments and added a dynamic component example too as it's an interesting pattern that may help you bypass nuxt-child by something else.
Not exactly related to our use case but worth a look IMO.

Exclude nested component from children (Nuxt routing)

1 Answers