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

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,9 +53,9 @@ 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                                                                                 |
 
 ### 📘 TypeScript Support
 
@@ -105,7 +106,7 @@ defineOptions({
 
 ### 🌲 Nested Routes
 
-With the `nested: true` option enabled, you can set nested route relationships using the `parent` property:
+Use the `parent` property to set nested route relationships (handled automatically):
 
 ```vue
 <script setup>
@@ -119,7 +120,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'
@@ -132,8 +196,7 @@ export default defineConfig({
     generoutes({
       pagesFolder: 'src/views',
       ignoreFolders: ['components', 'assets'],
-      routesPath: 'src/router/routes.js',
-      nested: true
+      routesPath: 'src/router/routes.js'
     })
   ]
 })

package/README.zh_CN.md

@@ -14,6 +14,7 @@
 - 🎨 可自定义路由配置
 - 🧩 支持通过`defineOptions`设置路由元数据
 - 🚦 支持路由重定向
+- 🖼️ 支持按布局分组路由
 
 ### 📦 安装
 
@@ -52,9 +53,9 @@ export default defineConfig({
 | 选项            | 类型       | 默认值           | 描述                                                                                      |
 | --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------- |
 | `pagesFolder`   | `string`   | `'src/pages'`    | 页面文件夹路径                                                                            |
+| `layoutsFolder` | `string`   | `'src/layouts'`  | 布局组件文件夹路径                                                                        |
 | `ignoreFolders` | `string[]` | `['components']` | 生成路由时忽略的文件夹                                                                    |
 | `routesPath`    | `string`   | 自动检测         | 生成的路由文件路径，根据 `tsconfig.json` 是否存在自动检测（存在则为 `.ts`，否则为 `.js`） |
-| `nested`        | `boolean`  | `false`          | 是否生成嵌套路由                                                                          |
 
 ### 📘 TypeScript 支持
 
@@ -105,7 +106,7 @@ defineOptions({
 
 ### 🌲 嵌套路由
 
-启用`nested: true`选项后，可以通过`parent`属性设置嵌套路由关系：
+使用 `parent` 属性即可建立嵌套路由关系（无需额外开关，自动生效）：
 
 ```vue
 <script setup>
@@ -119,7 +120,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'
@@ -132,8 +196,7 @@ export default defineConfig({
     generoutes({
       pagesFolder: 'src/views',
       ignoreFolders: ['components', 'assets'],
-      routesPath: 'src/router/routes.js',
-      nested: true
+      routesPath: 'src/router/routes.js'
     })
   ],
 })

package/dist/index.d.ts

@@ -1,39 +1,31 @@
 import { Plugin } from 'vite';
+import { RouteRecordRaw } from 'vue-router';
 
 /**
  * Route meta information
  */
 interface RouteMeta {
-    /** Route title */
+    /** Page title */
     title?: string;
-    /** Route icon */
+    /** Page icon */
     icon?: string;
+    /** Page code */
+    code?: string;
+    /** Page layout */
+    layout?: string | false;
     /** Whether authentication is required */
-    requiresAuth?: boolean;
+    requireAuth?: boolean;
+    /** Whether to keep alive */
+    keepAlive?: boolean;
     /** Whether the route is enabled */
     enabled?: boolean;
+    /** Whether it's the home page */
+    isHome?: boolean;
+    /** Whether it's a login page */
+    isLogin?: boolean;
     /** Custom properties */
     [key: string]: unknown;
 }
-/**
- * Internal route representation used during generation
- */
-interface InternalRoute {
-    /** Route name */
-    name: string;
-    /** Route path */
-    path: string;
-    /** Redirect path */
-    redirect?: string;
-    /** Route component placeholder */
-    component?: string;
-    /** Route meta information */
-    meta: RouteMeta;
-    /** Parent route name (for nested routes) */
-    parent?: string;
-    /** Child routes */
-    children?: InternalRoute[];
-}
 
 /**********************************
  * @Author: Ronnie Zhang
@@ -46,22 +38,10 @@ interface InternalRoute {
 /**
  * Generated route record with proper typing for vue-router
  */
-interface GeneratedRoute {
-    /** Route name */
-    name: string;
-    /** Route path */
-    path: string;
-    /** Redirect path */
-    redirect?: string;
-    /** Route component */
-    component?: () => Promise<any>;
-    /** Route meta information */
-    meta: RouteMeta;
-    /** Parent route name (for nested routes) */
-    parent?: string;
-    /** Child routes */
+type GeneratedRoute = RouteRecordRaw & {
+    meta?: RouteMeta;
     children?: GeneratedRoute[];
-}
+};
 interface Options {
     /**
      * pages folder
@@ -69,6 +49,12 @@ interface Options {
      * @default src/pages
      */
     pagesFolder: string;
+    /**
+     * layouts folder
+     *
+     * @default src/layouts
+     */
+    layoutsFolder: string;
     /**
      * ignore folders, ignore these folders when generating routes
      *
@@ -82,13 +68,7 @@ interface Options {
      * @default src/router/routes.ts (if tsconfig.json exists) or src/router/routes.js
      */
     routesPath: string;
-    /**
-     * nested routes
-     *
-     * @default false
-     */
-    nested: boolean;
 }
 declare function VitePluginGeneroutes(options?: Partial<Options>): Plugin;
 
-export { type GeneratedRoute, type InternalRoute, type Options, type RouteMeta, VitePluginGeneroutes, VitePluginGeneroutes as default };
+export { type GeneratedRoute, type Options, type RouteMeta, VitePluginGeneroutes, VitePluginGeneroutes as default };

package/dist/index.js

@@ -13,7 +13,7 @@ function toPascalCase(str) {
     return p1.toUpperCase();
   });
 }
-function convertToTree(routes) {
+function nestRoutes(routes) {
   const nodeMap = {};
   const result = [];
   routes.forEach((route) => {
@@ -66,80 +66,72 @@ 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();
   function detectTypeScriptProject() {
     const tsconfigPath = path.resolve(rootDir, "tsconfig.json");
     return fs.existsSync(tsconfigPath);
   }
-  function generateMenusAndRoutes() {
+  function generateRoutes() {
     const pages = globSync(`${pagesFolder}/**/*.vue`, { ignore: ignoreFolders.map((folder) => `${pagesFolder}/**/${folder}/**`) });
-    const routes = pages.map((filePath) => {
+    const routes = [];
+    for (let filePath of pages) {
       filePath = slash(filePath);
       const defineOptions = parseDefineOptions(filePath) || {};
       defineOptionsCache.set(filePath, JSON.stringify(defineOptions));
       const meta = defineOptions.meta || {};
       if (meta.enabled === false)
-        return null;
+        continue;
       const pathSegments = filePath.replace(`${pagesFolder}`, "").replace(".vue", "").replace("index", "").split("/").filter((item) => !!item && !/^\(.*\)$/.test(item));
       const name = defineOptions.name || pathSegments.map((item) => toPascalCase(item)).join("_") || "Index";
       const component = `##/${filePath}@@${name}##`;
       const routePath = `/${pathSegments.map((item) => item.replace(/\[(.*?)\]/g, (_, p1) => p1 === "...all" ? ":pathMatch(.*)*" : p1.split(",").map((i) => `:${i}`).join("/"))).join("/")}`;
-      return {
+      routes.push({
         name,
         path: routePath,
         redirect: defineOptions.redirect,
+        parent: defineOptions.parent,
         component: defineOptions.redirect ? void 0 : component,
-        meta,
-        parent: defineOptions.parent
-      };
-    }).filter((route) => route !== null);
+        meta
+      });
+    }
     const { duplicateNames, duplicatePaths } = findDuplicateRoutes(routes);
     if (duplicateNames.length)
       console.warn(`Warning: Duplicate names found in routes: ${duplicateNames.join(", ")}`);
     if (duplicatePaths.length)
       console.warn(`Warning: Duplicate paths found in routes: ${duplicatePaths.join(", ")}`);
-    return {
-      routes: nested ? convertToTree(routes) : routes
-    };
+    return wrapRoutesWithLayout(nestRoutes(routes));
+  }
+  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@@`,
+      children
+    }));
+    return layoutRoutes.concat(noLayoutRoutes);
   }
   async function writerRoutesFile(isInit = false) {
-    const { routes } = generateMenusAndRoutes();
+    const routes = generateRoutes();
     const typeDefinitions = isTypeScript ? `
-import type { RouteRecordRaw } from 'vue-router'
-
-/**
- * Route meta information
- */
-export interface RouteMeta {
-  /** Page title */
-  title?: string
-  /** Page icon */
-  icon?: string
-  /** Page code */
-  code?: string
-  /** Page layout */
-  layout?: string | false
-  /** Whether authentication is required */
-  requireAuth?: boolean
-  /** Whether to keep alive */
-  keepAlive?: boolean
-  /** Whether it's the home page */
-  isHome?: boolean
-  /** Whether it's a login page */
-  isLogin?: boolean
-  /** Custom properties */
-  [key: string]: unknown
-}
-
-/**
- * Generated route type with proper typing
- */
-export type GeneratedRoute = RouteRecordRaw & {
-  meta?: RouteMeta
-  children?: GeneratedRoute[]
-}
+import type { GeneratedRoute } from 'vite-plugin-generoutes'
 ` : "";
     const routesType = isTypeScript ? ": GeneratedRoute[]" : "";
     let routesStr = `
@@ -148,6 +140,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.2",
   "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>",