BLD - enable development-only Vue DevTools

frontend/package.json

@@ -15,7 +15,6 @@
     "test:browser-mocks": "node testserver/smoke.cjs"
   },
   "dependencies": {
-    "emoji-picker-element-data": "^1.8.0",
     "@tiptap/core": "^3.29.2",
     "@tiptap/extension-placeholder": "^3.29.2",
     "@tiptap/markdown": "^3.29.2",
@@ -23,6 +22,7 @@
     "@tiptap/starter-kit": "^3.29.2",
     "@tiptap/vue-3": "^3.29.2",
     "dompurify": "^3.4.13",
+    "emoji-picker-element-data": "^1.8.0",
     "fix-webm-duration": "^1.0.6",
     "konsta": "~5.2.0",
     "lucide-vue-next": "^0.525.0",
@@ -47,6 +47,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "~5.8.0",
     "vite": "^7.0.0",
+    "vite-plugin-vue-devtools": "^8.2.1",
     "vitest": "^3.2.4",
     "vue-tsc": "^2.2.10"
   }

frontend/vite.config.ts

@@ -3,8 +3,9 @@ import { fileURLToPath, URL } from 'node:url'
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
-export default defineConfig({
+export default defineConfig(({ command }) => ({
   base: './',
   build: {
     assetsDir: 'assets',
@@ -22,7 +23,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [tailwindcss(), vue()],
+  plugins: [command === 'serve' && vueDevTools(), tailwindcss(), vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -37,4 +38,4 @@ export default defineConfig({
     // numeric loopback origin. Keep the local UI on the localhost origin.
     host: 'localhost',
   },
-})
+}))