vite-plugin-generoutes 1.1.1 → 2.0.0-beta.1

package/README.md

@@ -14,6 +14,7 @@ A Vite plugin that automatically generates Vue router configuration based on fil
 - 🎨 Customizable route configuration
 - 🧩 Support for route metadata via `defineOptions`
 - 🚦 Route redirection support
+- 🖼️ Layout-based route grouping
 
 ### 📦 Installation
 
@@ -52,6 +53,7 @@ export default defineConfig({
 | Option          | Type       | Default          | Description                                                                                                       |
 | --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
 | `pagesFolder`   | `string`   | `'src/pages'`    | Path to pages folder                                                                                              |
+| `layoutsFolder` | `string`   | `'src/layouts'`  | Path to layouts folder                                                                                            |
 | `ignoreFolders` | `string[]` | `['components']` | Folders to ignore when generating routes                                                                          |
 | `routesPath`    | `string`   | Auto-detected    | Path to generated routes file. Auto-detected based on `tsconfig.json` presence (`.ts` if exists, otherwise `.js`) |
 | `nested`        | `boolean`  | `false`          | Whether to generate nested routes                                                                                 |
@@ -119,7 +121,70 @@ defineOptions({
 </script>
 ```
 
-### 🚀 Complete Example
+### �️ Layout Routes
+
+Routes are automatically grouped by their `meta.layout` property and wrapped with a parent layout route:
+
+- Routes with `meta.layout: false` will **not** be wrapped with a layout
+- Routes without `meta.layout` will use the `'default'` layout by default
+- Routes with `meta.layout: 'xxx'` will use the corresponding layout component from `layoutsFolder`
+
+```vue
+<!-- src/pages/login.vue - No layout wrapper -->
+<script setup>
+defineOptions({
+  name: 'Login',
+  meta: {
+    layout: false
+  }
+})
+</script>
+```
+
+```vue
+<!-- src/pages/home.vue - Uses 'admin' layout -->
+<script setup>
+defineOptions({
+  name: 'Home',
+  meta: {
+    layout: 'admin'
+  }
+})
+</script>
+```
+
+**Generated route structure example:**
+
+```javascript
+[
+  // Routes with layout: false are not wrapped
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('/src/pages/login.vue'),
+    meta: { layout: false }
+  },
+  // Routes are grouped by layout
+  {
+    name: 'LAYOUT_DEFAULT',
+    path: '/__layout_default__',
+    component: () => import('/src/layouts/default.vue'),
+    children: [
+      { name: 'Index', path: '/' }
+    ]
+  },
+  {
+    name: 'LAYOUT_ADMIN',
+    path: '/__layout_admin__',
+    component: () => import('/src/layouts/admin.vue'),
+    children: [
+      { name: 'Home', path: '/home' }
+    ]
+  }
+]
+```
+
+### �🚀 Complete Example
 
 ```javascript
 import vue from '@vitejs/plugin-vue'

package/README.zh_CN.md

@@ -14,6 +14,7 @@
 - 🎨 可自定义路由配置
 - 🧩 支持通过`defineOptions`设置路由元数据
 - 🚦 支持路由重定向
+- 🖼️ 支持按布局分组路由
 
 ### 📦 安装
 
@@ -52,6 +53,7 @@ export default defineConfig({
 | 选项            | 类型       | 默认值           | 描述                                                                                      |
 | --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------- |
 | `pagesFolder`   | `string`   | `'src/pages'`    | 页面文件夹路径                                                                            |
+| `layoutsFolder` | `string`   | `'src/layouts'`  | 布局组件文件夹路径                                                                        |
 | `ignoreFolders` | `string[]` | `['components']` | 生成路由时忽略的文件夹                                                                    |
 | `routesPath`    | `string`   | 自动检测         | 生成的路由文件路径，根据 `tsconfig.json` 是否存在自动检测（存在则为 `.ts`，否则为 `.js`） |
 | `nested`        | `boolean`  | `false`          | 是否生成嵌套路由                                                                          |
@@ -119,7 +121,70 @@ defineOptions({
 </script>
 ```
 
-### 🚀 完整示例
+### �️ 布局路由
+
+路由会根据 `meta.layout` 属性自动分组，并包裹在对应的布局父级路由中：
+
+- 设置 `meta.layout: false` 的路由**不会**被布局包裹
+- 未设置 `meta.layout` 的路由默认使用 `'default'` 布局
+- 设置 `meta.layout: 'xxx'` 的路由会使用 `layoutsFolder` 中对应的布局组件
+
+```vue
+<!-- src/pages/login.vue - 不使用布局包裹 -->
+<script setup>
+defineOptions({
+  name: 'Login',
+  meta: {
+    layout: false
+  }
+})
+</script>
+```
+
+```vue
+<!-- src/pages/home.vue - 使用 'admin' 布局 -->
+<script setup>
+defineOptions({
+  name: 'Home',
+  meta: {
+    layout: 'admin'
+  }
+})
+</script>
+```
+
+**生成的路由结构示例：**
+
+```javascript
+[
+  // layout: false 的路由不会被包裹
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('/src/pages/login.vue'),
+    meta: { layout: false }
+  },
+  // 路由按布局分组
+  {
+    name: 'LAYOUT_DEFAULT',
+    path: '/__layout_default__',
+    component: () => import('/src/layouts/default.vue'),
+    children: [
+      { name: 'Index', path: '/' }
+    ]
+  },
+  {
+    name: 'LAYOUT_ADMIN',
+    path: '/__layout_admin__',
+    component: () => import('/src/layouts/admin.vue'),
+    children: [
+      { name: 'Home', path: '/home' }
+    ]
+  }
+]
+```
+
+### �🚀 完整示例
 
 ```javascript
 import vue from '@vitejs/plugin-vue'

package/dist/index.d.ts

@@ -12,6 +12,8 @@ interface RouteMeta {
     requiresAuth?: boolean;
     /** Whether the route is enabled */
     enabled?: boolean;
+    /** Layout component name, false to disable layout wrapping */
+    layout?: string | false;
     /** Custom properties */
     [key: string]: unknown;
 }
@@ -69,6 +71,12 @@ interface Options {
      * @default src/pages
      */
     pagesFolder: string;
+    /**
+     * layouts folder
+     *
+     * @default src/layouts
+     */
+    layoutsFolder: string;
     /**
      * ignore folders, ignore these folders when generating routes
      *

package/dist/index.js

@@ -66,6 +66,7 @@ function VitePluginGeneroutes(options = {}) {
   let routesPath;
   let isTypeScript;
   const pagesFolder = options.pagesFolder || "src/pages";
+  const layoutsFolder = options.layoutsFolder || "src/layouts";
   const ignoreFolders = options.ignoreFolders || ["components"];
   const nested = options.nested || false;
   const defineOptionsCache = /* @__PURE__ */ new Map();
@@ -100,10 +101,37 @@ function VitePluginGeneroutes(options = {}) {
       console.warn(`Warning: Duplicate names found in routes: ${duplicateNames.join(", ")}`);
     if (duplicatePaths.length)
       console.warn(`Warning: Duplicate paths found in routes: ${duplicatePaths.join(", ")}`);
+    const processedRoutes = wrapRoutesWithLayout(nested ? convertToTree(routes) : routes);
     return {
-      routes: nested ? convertToTree(routes) : routes
+      routes: processedRoutes
     };
   }
+  function wrapRoutesWithLayout(routes) {
+    const layoutGroups = /* @__PURE__ */ new Map();
+    const noLayoutRoutes = [];
+    for (const route of routes) {
+      const layout = route.meta?.layout;
+      if (layout === false) {
+        noLayoutRoutes.push(route);
+      } else {
+        const layoutName = layout || "default";
+        const group = layoutGroups.get(layoutName);
+        if (group) {
+          group.push(route);
+        } else {
+          layoutGroups.set(layoutName, [route]);
+        }
+      }
+    }
+    const layoutRoutes = Array.from(layoutGroups, ([layoutName, children]) => ({
+      name: `LAYOUT_${layoutName.toUpperCase()}`,
+      path: `/__layout_${layoutName}__`,
+      component: `@@layout@@/${layoutsFolder}/${layoutName}.vue@@`,
+      meta: {},
+      children
+    }));
+    return [...noLayoutRoutes, ...layoutRoutes];
+  }
   async function writerRoutesFile(isInit = false) {
     const { routes } = generateMenusAndRoutes();
     const typeDefinitions = isTypeScript ? `
@@ -148,6 +176,7 @@ export type GeneratedRoute = RouteRecordRaw & {
     export const routes${routesType} = ${JSON.stringify(routes, null, 2)}
     `;
     routesStr = routesStr.replace(/"##(.*)##"/g, (_, p1) => `async () => ({...(await import('${p1.split("@@")[0]}')).default, name: '${p1.split("@@")[1]}'})`);
+    routesStr = routesStr.replace(/"@@layout@@(.*)@@"/g, (_, p1) => `() => import('${p1}')`);
     const parser = isTypeScript ? "typescript" : "babel";
     routesStr = await prettier.format(routesStr, { parser, semi: false, singleQuote: true });
     const filePath = path.resolve(rootDir, routesPath);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-generoutes",
   "type": "module",
-  "version": "1.1.1",
+  "version": "2.0.0-beta.1",
   "packageManager": "pnpm@10.27.0",
   "description": "A Vite plugin that generate routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.",
   "author": "Ronnie Zhang <zclzone@outlook.com>",