💪 In built support for layouts

[jd-solanki]

This feature request is for removing the usage of third-party lib: vite-plugin-vue-layouts

I raised a feature request there to add support for unplugin-vue-router but it looks like lib isn't maintained well.

Hence, here I am raising a feature request for adding layout support within unplugin-vue-router itself.

P.S. Even README suggests we can use vite-plugin-vue-layouts with unplugin-vue-router, I guess it won't according to my raised issue in that repo. WDYT 🤔

[posva]

I don't want to remove the use of an existing lib. I think the author did a great job and it's great to be able to choose whether to use it or not. If the lib is not well maintained, you could try maintaining it yourself!

As for the workaround for vite-plugin-vue-layouts, you can find it in some discussions here. This is the relevant file: https://github.com/zynth17/unplugin-vue-router-bug-dynamic-path/blob/main/src/modules/router.ts

import {
  createRouter,
  createWebHistory,
  type RouteRecordRaw,
} from 'vue-router/auto'

import { setupLayouts } from 'virtual:generated-layouts'
import type { ViteSetupModule } from '@/types/ViteSetupModule'

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]
}

export const router = createRouter({
  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.includes('auth')) {
        route = {
          ...route,
          meta: {
            auth: false,
            layout: 'auth-layout',
            ...route.meta,
          },
        }
      }

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

      return recursiveLayouts(route)
    })
  },
  history: createWebHistory(),
})

[jd-solanki]

Thanks for detailed response 😇