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,14 +5,15 @@ 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}`;
 
 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
 			})
 		);
 	}