feat: alternative getRoutes that filters layouts

closes #55
JohnCampionJr · Dec 5, 2023 · 31d3474 · 31d3474
1 parent 1041502
commit 31d3474
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/client.d.ts b/client.d.ts
@@ -7,6 +7,8 @@ declare module 'layouts-generated' {
 }
 
 declare module 'virtual:generated-layouts' {
-  import type { RouteRecordRaw } from 'vue-router'
+  import type { Router, RouteRecordRaw } from 'vue-router'
+  // need any here due to different types for vue-router versions
+  export function createGetRoutes(router: Router | any, withLayout?: boolean): () => RouteRecordRaw[]
   export function setupLayouts(routes: RouteRecordRaw[]): RouteRecordRaw[]
 }
diff --git a/examples/client-side/src/main.ts b/examples/client-side/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import { setupLayouts } from 'virtual:generated-layouts'
+import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts'
 import generatedRoutes from 'virtual:generated-pages'
 import App from './App.vue'
 import './index.css'
@@ -12,6 +12,8 @@ const router = createRouter({
   routes,
 })
 
+const getRoutes = createGetRoutes(router)
+console.log(getRoutes())
 const app = createApp(App)
 
 app.use(router)

diff --git a/examples/spa/src/main.ts b/examples/spa/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import { setupLayouts } from 'virtual:generated-layouts'
+import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts'
 import generatedRoutes from 'virtual:generated-pages'
 import App from './App.vue'
 import './index.css'
@@ -12,6 +12,9 @@ const router = createRouter({
   routes,
 })
 
+const getRoutes = createGetRoutes(router)
+console.log(getRoutes())
+
 const app = createApp(App)
 
 app.use(router)

diff --git a/src/RouteLayout.ts b/src/RouteLayout.ts
@@ -3,6 +3,13 @@ import { ResolvedOptions } from './types'
 function getClientCode(importCode: string, options: ResolvedOptions) {
   const code = `
 ${importCode}
+export const createGetRoutes = (router, withLayout = false) => {
+  const routes = router.getRoutes()
+  if (withLayout) {
+      return routes
+  }
+  return () => routes.filter(route => !route.meta.isLayout)
+}
 
 export function setupLayouts(routes) {
   return routes.map(route => {
@@ -14,7 +21,10 @@ export function setupLayouts(routes) {
       return {
         path: route.path,
         component: layouts[componentName],
-        children: route.path === '/' ? [route] : [{...route, path: ''}]
+        children: route.path === '/' ? [route] : [{...route, path: ''}],
+        meta: {
+          isLayout: true
+        }
       }
     }
   })