fix: synchronising logic to vite-plugin-vue-layouts

dishait · Dec 29, 2023 · 3e88b20 · 3e88b20
1 parent 6c5ff16
commit 3e88b20
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -30,40 +30,40 @@ npm i vite-plugin-vue-meta-layouts -D
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [Vue(), MetaLayouts()],
-});
+})
 ```
 
 #### 使用
 
 ```ts
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const routes = setupLayouts([
  {
  // ... 页面路由配置
  },
-]);
+])
 
 const router = createRouter({
  routes,
  history: createWebHistory(),
-});
+})
 ```
 
 1. 创建 `layouts/default.vue` 默认布局，此时页面都会被应用该布局
 
 ```html
 <template>
- default
- <router-view />
- <!-- 视图出口 -->
+ default
+ <router-view />
+ <!-- 视图出口 -->
 </template>
 ```
 
@@ -76,7 +76,7 @@ const router = createRouter({
 const home = {
  path: "/",
  component: () => import("./pages/home.vue"),
-};
+}
 
 // 应用 layouts/other.vue 布局
 const about = {
@@ -85,9 +85,9 @@ const about = {
  meta: {
  layout: "other", // 通过元信息来管理布局
  },
-};
+}
 
-const routes = setupLayouts([home, about]);
+const routes = setupLayouts([home, about])
 ```
 
 <br />
@@ -106,31 +106,31 @@ npm i vite-plugin-pages -D
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import Pages from "vite-plugin-pages"; // 引入文件路由插件
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import Pages from "vite-plugin-pages" // 引入文件路由插件
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [
  Vue(),
  Pages(), // 配置文件路由插件
  MetaLayouts(),
  ],
-});
+})
 ```
 
 ##### 使用
 
 ```ts
-import fileRoutes from "~pages"; // 引入文件路由表
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import fileRoutes from "~pages" // 引入文件路由表
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const router = createRouter({
  routes: setupLayouts(fileRoutes), // 注册文件路由表
  history: createWebHistory(),
-});
+})
 ```
 
 此时可以通过页面中的自定义块 `route` 的 `meta` 来做布局配置
@@ -156,14 +156,14 @@ npm i unplugin-vue-router -D
 ##### 使用
 
 ```ts
-import { routes } from "vue-router/auto/routes"; // 引入文件路由表
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import { routes } from "vue-router/auto/routes" // 引入文件路由表
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const router = createRouter({
  routes: setupLayouts(routes), // 注册文件路由表
  history: createWebHistory(),
-});
+})
 ```
 
 <br />
@@ -173,9 +173,9 @@ const router = createRouter({
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [
@@ -184,9 +184,10 @@ export default defineConfig({
  target: "src/layouts", // 布局目录，默认 src/layouts
  defaultLayout: "default", // 默认布局，默认为 default
  importMode: "sync", // 加载模式，支持 sync 和 async。默认为自动处理，SSG 时为 sync，非 SSG 时为 async
+ skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
  }),
  ],
-});
+})
 ```
 
 <br />
@@ -222,12 +223,12 @@ export default defineConfig({
 👇
 
 ```ts
-import { createGetRoutes } from "virtual:meta-layouts";
+import { createGetRoutes } from "virtual:meta-layouts"
 
-const getRoutes = createGetRoutes(router);
+const getRoutes = createGetRoutes(router)
 
 // 获取路由表但是不包含布局路由
-console.log(getRoutes());
+console.log(getRoutes())
 ```
 
 <br />

diff --git a/README_EN.md b/README_EN.md
@@ -31,39 +31,39 @@ npm i vite-plugin-vue-meta-layouts -D
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [Vue(), MetaLayouts()],
-});
+})
 ```
 
 #### usage
 
 ```ts
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const routes = setupLayouts([
  {
  // ... Page routes
  },
-]);
+])
 
 const router = createRouter({
  routes,
  history: createWebHistory(),
-});
+})
 ```
 
 1. `layouts/default.vue` 👉 The default layout, which is now applied to the page
 
 ```html
 <template>
- default
- <router-view />
+ default
+ <router-view />
 </template>
 ```
 
@@ -76,7 +76,7 @@ For example `layouts/other.vue`
 const home = {
  path: "/",
  component: () => import("./pages/home.vue"),
-};
+}
 
 // apply layouts/other.vue layout
 const about = {
@@ -85,9 +85,9 @@ const about = {
  meta: {
  layout: "other", // Manage layouts through meta information
  },
-};
+}
 
-const routes = setupLayouts([home, about]);
+const routes = setupLayouts([home, about])
 ```
 
 <br />
@@ -106,31 +106,31 @@ npm i vite-plugin-pages -D
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import Pages from "vite-plugin-pages"; // Introducing the file routing plugin
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import Pages from "vite-plugin-pages" // Introducing the file routing plugin
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [
  Vue(),
  Pages(), // Configure the configuration file routing plug-in
  MetaLayouts(),
  ],
-});
+})
 ```
 
 ##### 使用
 
 ```ts
-import fileRoutes from "~pages"; // file routes
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import fileRoutes from "~pages" // file routes
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const router = createRouter({
  routes: setupLayouts(fileRoutes), // Register the file routes
  history: createWebHistory(),
-});
+})
 ```
 
 At this time, the layout can be configured by `meta` of the custom block `route`
@@ -157,14 +157,14 @@ npm i unplugin-vue-router -D
 ##### usage
 
 ```ts
-import { routes } from "vue-router/auto/routes"; // file routes
-import { setupLayouts } from "virtual:meta-layouts";
-import { createRouter, createWebHistory } from "vue-router";
+import { routes } from "vue-router/auto/routes" // file routes
+import { setupLayouts } from "virtual:meta-layouts"
+import { createRouter, createWebHistory } from "vue-router"
 
 const router = createRouter({
  routes: setupLayouts(routes), // Register the file routes
  history: createWebHistory(),
-});
+})
 ```
 
 <br />
@@ -174,9 +174,9 @@ const router = createRouter({
 
 ```ts
 // vite.config.js
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import MetaLayouts from "vite-plugin-vue-meta-layouts";
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import MetaLayouts from "vite-plugin-vue-meta-layouts"
 
 export default defineConfig({
  plugins: [
@@ -185,9 +185,10 @@ export default defineConfig({
  target: "src/layouts", // Layout directory, default src/layouts
  defaultLayout: "default", // Default layout, which defaults to default
  importMode: "sync", // Load mode, support sync and async. The default is automatic processing, sync for SSGs, and async for non-SSGs
+ skipTopLevelRouteLayout: true, // Turn on fixing https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134, default is false Close
  }),
  ],
-});
+})
 ```
 
 <br />
@@ -225,12 +226,12 @@ layer, it may cause confusion in obtaining the routing table, and auxiliary
 functions can be used at this time 👇
 
 ```ts
-import { createGetRoutes } from "virtual:meta-layouts";
+import { createGetRoutes } from "virtual:meta-layouts"
 
-const getRoutes = createGetRoutes(router);
+const getRoutes = createGetRoutes(router)
 
 // Gets the route table, but does not contain layout routes
-console.log(getRoutes());
+console.log(getRoutes())
 ```
 
 <br />

diff --git a/examples/unplugin-vue-router/vite.config.ts b/examples/unplugin-vue-router/vite.config.ts
@@ -8,7 +8,9 @@ export default defineConfig({
  plugins: [
  Vue(),
  Inspect(),
- MetaLayouts(),
+ MetaLayouts({
+ skipTopLevelRouteLayout: true,
+ }),
  VueRouter({
  dts: "types/typed-router.d.ts",
  }),

diff --git a/src/index.ts b/src/index.ts
@@ -15,14 +15,21 @@ export interface Options {
  /**
  * default auto resolve
  */
- importMode: "sync" | "async";
+ importMode?: "sync" | "async";
+ /**
+ * If opened, fix →
+ * https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134
+ * @default false
+ */
+ skipTopLevelRouteLayout?: boolean;
 }
 
 export default function MetaLayouts(options: Partial<Options> = {}): Plugin {
  const {
  target = "src/layouts",
  defaultLayout = "default",
  importMode = process.env.VITE_SSG ? "sync" : "async",
+ skipTopLevelRouteLayout = false,
  } = options;
 
  const { virtualModuleId, resolvedVirtualModuleId } = createVirtualModuleID(
@@ -42,6 +49,7 @@ export default function MetaLayouts(options: Partial<Options> = {}): Plugin {
  target,
  importMode,
  defaultLayout,
+ skipTopLevelRouteLayout,
  });
  }
  },

diff --git a/src/utils.ts b/src/utils.ts
@@ -9,7 +9,7 @@ export function normalizePath(path: string) {
 export async function isVite2() {
  const info = await getPackageInfo("vite");
  if (info) {
- return /^.?2/.test(info.version);
+ return /^.?2/.test(info.version!);
  }
  return false;
 }