feat: support children structures that have no route component (and only children)

[lrstanley]

vue-router supports nested routes as documented here. However, one item not described in the documentation is a newer feature, which allows users to not provide a component when children has contents. What this can mean is you can have something like the following:

{
        "path": "/info",
        "children": [
            {
                "path": "privacy",
                "component": {/* ... */},
                "children": [
                    {
                        "path": "",
                        "name": "/info/privacy",
                        "meta": {
                            "title": "Privacy Policy"
                        }
                    }
                ]
            },
            {
                "path": "service-health",
                "component": {/* ... */},
                "children": [
                    {
                        "path": "",
                        "name": "/info/service-health",
                        "meta": {
                            "title": "Service Health"
                        }
                    }
                ]
            },
            {
                "path": "terms",
                "component": {/* ... */},
                "children": [
                    {
                        "path": "",
                        "name": "/info/terms",
                        "meta": {
                            "title": "Terms of Service"
                        }
                    }
                ]
            }
        ]
    }

Where parent routes may only have children and no component, which means it's just an alternative way of structuring the route list. Under this scenario, vite-plugin-vue-layouts should probably traverse the routes, and if it encounters a route with children but no component, it recurses into those sub-routes, all the way through the tree.

This has come up for me recently, when using the unplugin-vue-router package, which generates it's routes in a non-flat fashion (compared to vite-plugin-pages), and this is still valid for vue-router. see this issue for discussion on the topic.

In the above issue, I have a temporary solution that allows this workflow by recursively re-invoking vite-plugin-vue-layouts, though it's not pretty:

// file: src/lib/core/router.ts

import { setupLayouts } from "virtual:generated-layouts"
import { createRouter, createWebHistory } from "vue-router/auto"
import type { RouteRecordRaw } from "vue-router/auto"

function recursiveLayouts(route: RouteRecordRaw): RouteRecordRaw {
  if (route.children) {
    for (let i = 0; i < route.children.length; i++) {
      route.children[i] = recursiveLayouts(route.children[i])
    }

    return route
  }

  return setupLayouts([route])[0]
}

const router = createRouter({
  history: createWebHistory("/"),
  extendRoutes(routes) {
    return routes.map((route) => {
      // My custom extendRoutes logic, that adds a meta field to force specific pages under
      // a given path to require auth.
      if (route.path.startsWith("/admin") || route.path.startsWith("/dashboard")) {
        route = {
          ...route,
          meta: {
            auth: true,
            ...route.meta,
          },
        }
      }

      // For each route, pass it to recursiveLayouts, which will apply layouts properly
      // (without duplicating or accidentally double-wrapping components).
      return recursiveLayouts(route)
    })
  },
})

It would be nice if vite-plugin-vue-layouts could support the children functionality.

[jd-solanki]

I'm also facing this and can't use typed routes 😞

@JohnCampionJr Have you checked unplugin-vue-router, that's future 🚀

[linesoft2]

I believe you can use "." to replace "/".
https://github.com/posva/unplugin-vue-router#nested-routes-without-nesting-layouts

[lrstanley]

I believe you can use "." to replace "/". posva/unplugin-vue-router#nested-routes-without-nesting-layouts

This would defeat the main purpose of unplugin-vue-router, if everything used ".", which means no longer using folder structures for routing paths.