feat(vue): add support vue devtools options (#11055)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Jan-Niklas Wortmann <jan-niklas.wortmann@jetbrains.com>
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

.changeset/sweet-needles-juggle.md

@@ -0,0 +1,21 @@
+---
+"@astrojs/vue": minor
+---
+
+Updates the `devtools` type to allow passing `VueDevToolsOptions`
+
+For more customization, you can pass options that the [Vue DevTools Vite Plugin](https://devtools-next.vuejs.org/guide/vite-plugin#options) supports. (Note: `appendTo` is not supported.) For example, you can set `launchEditor` to your preferred editor if you are not using Visual Studio Code:
+
+```js title="astro.config.mjs"
+import { defineConfig } from "astro/config";
+import vue from "@astrojs/vue";
+
+export default defineConfig({
+  // ...
+  integrations: [
+    vue({
+      devtools: { launchEditor: "webstorm" },
+    }),
+  ],
+});
+```

packages/integrations/vue/package.json

@@ -43,7 +43,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/compiler-sfc": "^3.4.27",
-    "vite-plugin-vue-devtools": "^7.1.3"
+    "vite-plugin-vue-devtools": "^7.2.0"
   },
   "devDependencies": {
     "astro": "workspace:*",

packages/integrations/vue/src/index.ts

@@ -5,6 +5,7 @@ import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx';
 import { MagicString } from '@vue/compiler-sfc';
 import type { AstroIntegration, AstroRenderer, HookParameters } from 'astro';
 import type { Plugin, UserConfig } from 'vite';
+import type {VitePluginVueDevToolsOptions} from "vite-plugin-vue-devtools";
 
 const VIRTUAL_MODULE_ID = 'virtual:@astrojs/vue/app';
 const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
@@ -12,7 +13,7 @@ const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 interface Options extends VueOptions {
 	jsx?: boolean | VueJsxOptions;
 	appEntrypoint?: string;
-	devtools?: boolean;
+	devtools?: boolean | Omit<VitePluginVueDevToolsOptions, "appendTo">;
 }
 
 function getRenderer(): AstroRenderer {
@@ -125,9 +126,11 @@ async function getViteConfiguration(
 
 	if (command === 'dev' && options?.devtools) {
 		const vueDevTools = (await import('vite-plugin-vue-devtools')).default;
+		const devToolsOptions =  typeof options.devtools === 'object' ? options.devtools : {}
 		config.plugins?.push(
 			vueDevTools({
-				appendTo: VIRTUAL_MODULE_ID,
+				...devToolsOptions,
+				appendTo: VIRTUAL_MODULE_ID
 			})
 		);
 	}

pnpm-lock.yaml

@@ -5366,8 +5366,8 @@ importers:
         specifier: ^3.4.27
         version: 3.4.27
       vite-plugin-vue-devtools:
-        specifier: ^7.1.3
+        specifier: ^7.2.0
-        version: 7.1.3(vite@5.2.11)(vue@3.4.27)
+        version: 7.2.0(vite@5.2.11)(vue@3.4.27)
     devDependencies:
       astro:
         specifier: workspace:*
@@ -5956,7 +5956,7 @@ packages:
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.5
       semver: 6.3.1
     dev: false
 
@@ -6066,13 +6066,6 @@ packages:
       '@babel/types': 7.24.5
     dev: false
 
-  /@babel/helper-split-export-declaration@7.22.6:
-    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.24.5
-    dev: false
-
   /@babel/helper-split-export-declaration@7.24.5:
     resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==}
     engines: {node: '>=6.9.0'}
@@ -9319,11 +9312,11 @@ packages:
       '@vue/compiler-dom': 3.4.27
       '@vue/shared': 3.4.27
 
-  /@vue/devtools-core@7.1.3(vite@5.2.11)(vue@3.4.27):
+  /@vue/devtools-core@7.2.0(vite@5.2.11)(vue@3.4.27):
-    resolution: {integrity: sha512-pVbWi8pf2Z/fZPioYOIgu+cv9pQG55k4D8bL31ec+Wfe+pQR0ImFDu0OhHfch1Ra8uvLLrAZTF4IKeGAkmzD4A==}
+    resolution: {integrity: sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==}
     dependencies:
-      '@vue/devtools-kit': 7.1.3(vue@3.4.27)
+      '@vue/devtools-kit': 7.2.0(vue@3.4.27)
-      '@vue/devtools-shared': 7.1.3
+      '@vue/devtools-shared': 7.2.0
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
@@ -9333,12 +9326,12 @@ packages:
       - vue
     dev: false
 
-  /@vue/devtools-kit@7.1.3(vue@3.4.27):
+  /@vue/devtools-kit@7.2.0(vue@3.4.27):
-    resolution: {integrity: sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==}
+    resolution: {integrity: sha512-Kx+U0QiQg/g714euYKfnCdhTcOycSlH1oyTE57D0sAmisdsRCNLfXcnnIwcFY2jdCpuz9DNbuE0VWQuYF5zAZQ==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@vue/devtools-shared': 7.1.3
+      '@vue/devtools-shared': 7.2.0
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
@@ -9346,8 +9339,8 @@ packages:
       vue: 3.4.27(typescript@5.4.5)
     dev: false
 
-  /@vue/devtools-shared@7.1.3:
+  /@vue/devtools-shared@7.2.0:
-    resolution: {integrity: sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==}
+    resolution: {integrity: sha512-gVr3IjKjU7axNvclRgICgy1gq/TDnF1hhBAEox+l5mMXZiTIFVIm1zpcIPssc0HxMDgzy+lXqOVsY4DGyZ+ZeA==}
     dependencies:
       rfdc: 1.3.1
     dev: false
@@ -16809,8 +16802,8 @@ packages:
       - supports-color
     dev: false
 
-  /vite-plugin-vue-devtools@7.1.3(vite@5.2.11)(vue@3.4.27):
+  /vite-plugin-vue-devtools@7.2.0(vite@5.2.11)(vue@3.4.27):
-    resolution: {integrity: sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==}
+    resolution: {integrity: sha512-bFWwx/YF9M+aXTjDo0/6DrC7+WCzLg7wAmFoQA3Gd7cv5WV4u65hHSZN8bq0zhgHqtYQZdWnp0L2z6JNCwcIGg==}
     engines: {node: '>=v14.21.3'}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0
@@ -16818,14 +16811,14 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@vue/devtools-core': 7.1.3(vite@5.2.11)(vue@3.4.27)
+      '@vue/devtools-core': 7.2.0(vite@5.2.11)(vue@3.4.27)
-      '@vue/devtools-kit': 7.1.3(vue@3.4.27)
+      '@vue/devtools-kit': 7.2.0(vue@3.4.27)
-      '@vue/devtools-shared': 7.1.3
+      '@vue/devtools-shared': 7.2.0
       execa: 8.0.1
       sirv: 2.0.4
       vite: 5.2.11(@types/node@18.19.31)(sass@1.77.1)
       vite-plugin-inspect: 0.8.4(vite@5.2.11)
-      vite-plugin-vue-inspector: 5.0.1(vite@5.2.11)
+      vite-plugin-vue-inspector: 5.1.0(vite@5.2.11)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
@@ -16833,8 +16826,8 @@ packages:
       - vue
     dev: false
 
-  /vite-plugin-vue-inspector@5.0.1(vite@5.2.11):
+  /vite-plugin-vue-inspector@5.1.0(vite@5.2.11):
-    resolution: {integrity: sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==}
+    resolution: {integrity: sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==}
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
     peerDependenciesMeta: