Nested page render the default layout even set to another layout

[Discreater]

I'm using unplugin-vue-router.

pages and layout structure:

src/pages
├── about.vue
├── index.vue
└── nested
    └── index.vue

src/layouts
├── alpha.vue
└── default.vue

about.vue and nested/index.vue are set to alpha layout. But they have different behavior.

reproduce repo: https://github.com/Discreater/double-layout

[JohnCampionJr]

This is a side effect of unplug-vue-router.

You'll need to create a src/pages/nested.vue with its layout set to false to disable the top level layout.

See the unplugin-vue-router example.

I'm going to leave this issue open in the hopes that we can find a solution but so far I've had no luck.

[AdamMerrifield]

Another temporary solution without creating a new file is modifying routes before passing them to setupLayouts. Effectively doing the same thing.

const nestedRoute = routes.find((route) => route.path === '/nested')

if (nestedRoute) {
  nestedRoute.meta = nestedRoute.meta ?? {}
  nestedRoute.meta.layout = false
}

const routesWithLayouts = setupLayouts(routes)