Are nested layouts possible?

[chasegiunta]

As far as I can tell, nested layouts don't seem to be possible. Is this something that could be possible in the future?

[ctholho]

Hi, please take a look at the examples to see nested layouts in action.

Also, we have a section in the readme about how this plugin works. And there you will find, that nested layouts are possible via nested router views.

If you mean something else, don't be shy to ask. If I pointed you into the right direction, feel free to close this issue.

[chasegiunta]

@ctholho thanks for the quick response. If by nested router views, you mean

src/pages/page.vue

<template>
  <h1>My Page</h1>
</template>

<route lang="yaml">
meta:
  layout: first-layout.vue
</route>

src/layouts/first-layout.vue

<template>
  <router-view />
</template>

<route lang="yaml">
meta:
  layout: second-layout.vue
</route>

src/layouts/second-layout.vue

<template>
  <router-view />
</template>

then unfortunately this isn't working. The contents of second-layout.vue do not render. Am I understanding the usage correctly? I'm using the default configuration, nothing custom.

[chasegiunta]

@ctholho I've gone ahead with the way of slotting layouts (base & shell are also layouts here). the obvious downside is now i cannot utilize router-view effectively, only rehydrating the route change.

Taking this idea a step further, it would be cool to be able to define the nested layouts in the page's layout meta ala layout: base/shell/auth!

[davidboom95]

Any plans for supporting this?

[chasegiunta]

@davidboom95 I never actually got a response from the maintainer to know if I was perhaps just me implementing it wrong or if the feature actually didn't exist. @JohnCampionJr would you be able to clear this up by chance?

[JohnCampionJr]

@chasegiunta @davidboom95 Sorry about that. No, it doesn't currently support this. A PR would be welcome though :)

[markthree]

Hello, gentlemen, I use this plug-in in my work. My solution is to set up one more top-level file routing for vite-plugin-pages。

For details, please see 👉 vite-plugin-pages/Nested Routes

[mariusa]

Hi @markthree , thanks for sharing that! How are top.vue, default.vue and user.vue nested? What's their content, please? Does rendering foo.vue include content from all these 3?

[markthree]

Hi @mariusa, yes，To illustrate this scheme, I will provide an example warehouse to illustrate. Please wait a moment

[markthree]

Hi @mariusa , you can browse my example repo 👉 vite-nesting-layouts-example

[markthree]

@mariusa But note that the latest vite will only run once vite-plugin-vue -layouts in dev start， and I will try to fix the problem later. Please look forward to it 😁

[mariusa]

Thanks @markthree ! At http://localhost:3000/user I see

top
user index
[to foo](http://localhost:3000/user/foo)

The original reporter asked for multiple nested layouts. That is, have content from both top & default:

top
default
user index
[to foo](http://localhost:3000/user/foo)

Replacing the default with another layout is already possible.

[markthree]

@mariusa I understand his problem. At first, I wanted to PR, but it may conflict with vite-plugin-pages nested routing, so I used this simple scheme

[zhuhaobam]

This is not the final, but it is also a feasible direction Result like this: menu structure:

• views
  • first
    • second
      • third
        • anmial
          • index.vue
        • flower
          • index.vue
      • third.vue
      • youdodo.vue
    • second.vue
    • haododo.vue
  • first.vue

menu structure link: https://github.com/zhuhaobam/vtdd/tree/main/src/views

other link: https://github.com/zhuhaobam/vtdd/blob/main/src/layouts/components/sidebar/index.vue https://github.com/zhuhaobam/vtdd/blob/main/src/utils/router.ts