🐛 Fix inspection functionality not working for Vue devtools (#689)

it-at-m · Jan 10, 2025 · 42a2b31 · 42a2b31
1 parent 5b235b2
commit 42a2b31
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 85 deletions.
diff --git a/refarch-frontend/vite.config.ts b/refarch-frontend/vite.config.ts
@@ -8,41 +8,44 @@ import vueDevTools from "vite-plugin-vue-devtools";
 import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      template: { transformAssetUrls },
-      features: {
-        optionsAPI: false,
+export default defineConfig(({ mode }) => {
+  const isDevelopment = mode === "development";
+  return {
+    plugins: [
+      vue({
+        template: { transformAssetUrls },
+        features: {
+          optionsAPI: isDevelopment,
+        },
+      }),
+      vuetify({
+        autoImport: false,
+      }),
+      UnpluginFonts({
+        fontsource: {
+          families: [
+            {
+              name: "Roboto",
+              weights: [100, 300, 400, 500, 700, 900],
+              subset: "latin",
+            },
+          ],
+        },
+      }),
+      vueDevTools(),
+    ],
+    server: {
+      host: true,
+      port: 8081,
+      proxy: {
+        "/api": "http://localhost:8083",
+        "/actuator": "http://localhost:8083",
       },
-    }),
-    vuetify({
-      autoImport: false,
-    }),
-    UnpluginFonts({
-      fontsource: {
-        families: [
-          {
-            name: "Roboto",
-            weights: [100, 300, 400, 500, 700, 900],
-            subset: "latin",
-          },
-        ],
-      },
-    }),
-    vueDevTools(),
-  ],
-  server: {
-    host: true,
-    port: 8081,
-    proxy: {
-      "/api": "http://localhost:8083",
-      "/actuator": "http://localhost:8083",
     },
-  },
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
     },
-  },
+  };
 });
diff --git a/refarch-frontend/vitest.config.ts b/refarch-frontend/vitest.config.ts
@@ -4,17 +4,19 @@ import { defineConfig, mergeConfig } from "vitest/config";
 
 import viteConfig from "./vite.config";
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: "jsdom",
-      root: fileURLToPath(new URL("./", import.meta.url)),
-      server: {
-        deps: {
-          inline: ["vuetify"],
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: "jsdom",
+        root: fileURLToPath(new URL("./", import.meta.url)),
+        server: {
+          deps: {
+            inline: ["vuetify"],
+          },
         },
       },
-    },
-  })
+    })
+  )
 );
diff --git a/refarch-webcomponent/vite.config.ts b/refarch-webcomponent/vite.config.ts
@@ -5,41 +5,44 @@ import { defineConfig } from "vite";
 import vueDevTools from "vite-plugin-vue-devtools";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      features: {
-        customElement: true,
-        optionsAPI: false,
+export default defineConfig(({ mode }) => {
+  const isDevelopment = mode === "development";
+  return {
+    plugins: [
+      vue({
+        features: {
+          customElement: true,
+          optionsAPI: isDevelopment,
+        },
+      }),
+      vueDevTools(),
+    ],
+    server: {
+      port: 8082,
+      proxy: {
+        "/api": "http://localhost:8083",
+        "/actuator": "http://localhost:8083",
+        "/clients": "http://localhost:8083",
       },
-    }),
-    vueDevTools(),
-  ],
-  server: {
-    port: 8082,
-    proxy: {
-      "/api": "http://localhost:8083",
-      "/actuator": "http://localhost:8083",
-      "/clients": "http://localhost:8083",
     },
-  },
-  resolve: {
-    dedupe: ["vue"],
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-  build: {
-    manifest: true, // required for post build logic in 'processes' folder
-    rollupOptions: {
-      input: {
-        "refarch-hello-world-webcomponent":
-          "./src/refarch-hello-world-webcomponent.ts",
+    resolve: {
+      dedupe: ["vue"],
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
-      output: {
-        entryFileNames: "entry-[name]-[hash].js",
-        dir: "dist/src",
+    },
+    build: {
+      manifest: true, // required for post build logic in 'processes' folder
+      rollupOptions: {
+        input: {
+          "refarch-hello-world-webcomponent":
+            "./src/refarch-hello-world-webcomponent.ts",
+        },
+        output: {
+          entryFileNames: "entry-[name]-[hash].js",
+          dir: "dist/src",
+        },
       },
     },
-  },
+  };
 });
diff --git a/refarch-webcomponent/vitest.config.ts b/refarch-webcomponent/vitest.config.ts
@@ -4,12 +4,14 @@ import { defineConfig, mergeConfig } from "vitest/config";
 
 import viteConfig from "./vite.config";
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: "jsdom",
-      root: fileURLToPath(new URL("./", import.meta.url)),
-    },
-  })
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: "jsdom",
+        root: fileURLToPath(new URL("./", import.meta.url)),
+      },
+    })
+  )
 );