Is it possible to nest routes like with Vue Router?

[Anubarak]

I tried to migrate from normal Vue Router to unplugin-vue-router but I am having a hard time with route nesting.

I prepared this CodeSandbox to demonstrate what I want.
Basically it's to create the following Route config:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "layout",
      component: BaseLayout,
      redirect: "home",
      children: [
        {
          name: "home",
          path: "home",
          component: Home,
          children: [
            {
              name: "nested",
              path: "/nested",
              component: Nested,
              children: [
                {
                  name: "deep-nested",
                  path: "/nested/deep",
                  component: DeepNested,
                },
              ],
            },
            {
              name: "nested2",
              path: "/nested2",
              component: Nested2,
              children: [
                {
                  name: "deep-nested2",
                  path: "/nested/deep2",
                  component: DeepNested,
                },
              ],
            },
          ],
        },
      ],
    },
    {
      path: "/login",
      name: "login",
      component: LoginLayout,
      redirect: "home",
      children: [
        {
          name: "login-form",
          path: "",
          component: Login,
        },
      ],
    },
  ],
});

But I don't know how without heavily duplicating all my files time and time again.
I thought the reqired file structure would be kinda like in this Sandbox
(prefered structure)

However It seems I have to duplicate my "Layout" or "Root" files for each nested folder I want to use. So I kinda end up with a structure like

Within my current project I would have to create around 30 duplicate useless files as the structure would become

pages/
├─ home/
│  ├─ item1/
│  │  ├─ index.vue
│  ├─ item1.vue <- duplicate
│  ├─ item2/
│  │  ├─ index.vue
│  ├─ item2.vue <- duplicate
│  ├─ item3/
│  │  ├─ index.vue
│  ├─ item3.vue <- duplicate
│  ├─ index.vue <- duplicate
├─ home.vue <- duplicate
├─ login/
│  ├─ index.vue
├─ login.vue

Because Item3, Item2 and Item1 should be a child of Home.vue and use the very same layout. Or in Other words: in case I have 1 "layout" component and 10 other components should extend this layout component. In Vue Router I can add this layout component and 10 Children to it. What is the correct way with this library without having to duplicate my single layout component 10 times - once for each child?

[Ericlm]

Are you using a <RouterView /> component within the root index.vue?

[Anubarak]

Thank you for coming along.
Yes I do. You can see that in my demo.

[PindaPixel]

https://uvr.esm.is/guide/file-based-routing.html#nested-routes

[Anubarak]

@PindaPixel I know that and that's in my example. The link does not explain how to get rid of multiple duplicate files.
Can you explain that please?
I know I can do

src/pages/
├── users/
│   └── index.vue
└── users.vue

However when I have another folder that should be a child of users my structure becomes

src/pages/
├── another/
├── users/
│   └── index.vue
└── users.vue
└── another.vue

while another and users have equal content. When I have one layout component and 5 different paths in that layout component, I would need that layout component 5 times.
Same goes for any level of nesting.

[posva]

You want reusable layouts. Currently, the way to achieve this is creating a component with a slot and use it where needed. I opened #712 because I potentially want to add it but I'm a bit worried about how will this integrate with Nuxt

[Anubarak]

Thank you very much, that's exactly what I was looking for - would be awesome to have this as my current project heavily relies on many nested routes due to design choices. So generally speaking I have several nested layouts where all routes in a folder should have the very same layout

Sorry for my wrong wordings