Nested Pages (unplugin-vue-router) nest the layout pages

[shawnwildermuth]

trafficstars

Is this by design?

My layout is:

But when I look at the generated code, the default layout is outside of the yellow layout (I know they're nested routes but this doesn't seem right). The layouts look like:

<!-- layouts/default.vue -->
<template>
  <div class="bg-gray-200 p-2">
    <h1>Default Layout</h1>
    <RouterView></RouterView>
  </div>
</template>

<!-- layouts/yellow.vue -->
<template>
  <div class="border border-yellow-300 bg-neutral">
    <h1>Yellow Layout</h1>
    <RouterView></RouterView>
  </div>
</template>

The result is this:

But that doesn't seem right.

Repro:

demo.zip

[markthree]

@shawnwildermuth Yes, it's a design problem.

An easy way to solve this problem is to create pages/customer.vue and set the layout to false

<template>
    <RouterView />
</template>

<route lang="json">
{
    "meta": {
        "layout": false
    }
}
</route>

[markthree]

I've tried to solve the problem, but it seems to ignore parameter routing (There may be other scenarios that have not been tested), and I thought I'd try to see if I could come up with a more elegant solution in the near future (when I'm done with my latest work 😭)

Related issue → #134 Related pr → #137

Overall, this is a problem with the design of the file routing structure of unplugin-vue-router, and we can only try to make it make sense (in terms of layout)

[markthree]

@JohnCampionJr I think there should be an option to configure whether or not nested routes inherit the default layout

[He110te4m]

After a year, has there been any progress in this issue? Is there a better solution?

[reslear]

any news?

[darkbasic]

@reslear I suggest you to subscribe to this issue since vite-plugin-vue-layouts-next is not dead and is being used by the likes of vuetify: https://github.com/loicduong/vite-plugin-vue-layouts-next/issues/6