Friday, 15 January 2021

Exclude nested component from children (Nuxt routing)

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.

Thank you for any advice.



from Exclude nested component from children (Nuxt routing)

No comments:

Post a Comment