Exclude nested component from children (Nuxt routing)

user_6456586 0
Viewed 1099

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.

vue-router vuejs2 nuxt.js javascript
2 Answers

I encountered the same problem as you, although it's probably too late. But I'll leave this answer if anyone encounters a similar issue.

From your case, you wanted to make standalone.vue separated from parent _id.vue. But you want to still use the same sub-route as the other child.

You could actually use extendRoutes in nuxt.config.js to modify the generated route.
P.S: It's not necessary a clean way to do it though.

In nuxt.config.js, you can add extendRoutes to router, and modify them by using unshift and filter. Just like this

router: {
  extendRoutes(routes, resolve) {
    routes.find(el => el.name === 'account-id___en')
      .children
      .filter(el => el.name !== 'account-id-standalone___en');
    routes.unshift({
      path: "/en/account/:id/standalone",
      component: resolve(__dirname, 'pages/account/_id/standalone.vue'),
      name: "account-id-standalone___en"
    });
  },
},

Result:

[
  {
    path: "/en/account/:id/standalone",
    component: _6884b488,
    name: "account-id-standalone___en"
  },
  {
    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"
      },
    ],
  },
]

Ref: https://nuxtjs.org/docs/configuration-glossary/configuration-router/#extendroutes

user_119602480

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.

user_88165850
Related