diff --git a/.changeset/sweet-needles-juggle.md b/.changeset/sweet-needles-juggle.md new file mode 100644 index 000000000000..5588483e3bf7 --- /dev/null +++ b/.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" }, + }), + ], +}); +``` diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json index f1c808208ddb..4540e3eace50 100644 --- a/packages/integrations/vue/package.json +++ b/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:*", diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts index f61b35a09d6b..d855a4ad4639 100644 --- a/packages/integrations/vue/src/index.ts +++ b/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; } 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 }) ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8ddf64b741b1..c0320fce193b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5320,8 +5320,8 @@ importers: specifier: ^3.4.27 version: 3.4.27 vite-plugin-vue-devtools: - specifier: ^7.1.3 - version: 7.1.3(vite@5.2.11)(vue@3.4.27) + specifier: ^7.2.0 + version: 7.2.0(vite@5.2.11)(vue@3.4.27) devDependencies: astro: specifier: workspace:* @@ -5885,7 +5885,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 @@ -5995,13 +5995,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'} @@ -9252,11 +9245,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): - resolution: {integrity: sha512-pVbWi8pf2Z/fZPioYOIgu+cv9pQG55k4D8bL31ec+Wfe+pQR0ImFDu0OhHfch1Ra8uvLLrAZTF4IKeGAkmzD4A==} + /@vue/devtools-core@7.2.0(vite@5.2.11)(vue@3.4.27): + resolution: {integrity: sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==} dependencies: - '@vue/devtools-kit': 7.1.3(vue@3.4.27) - '@vue/devtools-shared': 7.1.3 + '@vue/devtools-kit': 7.2.0(vue@3.4.27) + '@vue/devtools-shared': 7.2.0 mitt: 3.0.1 nanoid: 3.3.7 pathe: 1.1.2 @@ -9266,12 +9259,12 @@ packages: - vue dev: false - /@vue/devtools-kit@7.1.3(vue@3.4.27): - resolution: {integrity: sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==} + /@vue/devtools-kit@7.2.0(vue@3.4.27): + 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 @@ -9279,8 +9272,8 @@ packages: vue: 3.4.27(typescript@5.4.5) dev: false - /@vue/devtools-shared@7.1.3: - resolution: {integrity: sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==} + /@vue/devtools-shared@7.2.0: + resolution: {integrity: sha512-gVr3IjKjU7axNvclRgICgy1gq/TDnF1hhBAEox+l5mMXZiTIFVIm1zpcIPssc0HxMDgzy+lXqOVsY4DGyZ+ZeA==} dependencies: rfdc: 1.3.1 dev: false @@ -16903,8 +16896,8 @@ packages: - supports-color dev: false - /vite-plugin-vue-devtools@7.1.3(vite@5.2.11)(vue@3.4.27): - resolution: {integrity: sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==} + /vite-plugin-vue-devtools@7.2.0(vite@5.2.11)(vue@3.4.27): + 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 @@ -16912,14 +16905,14 @@ packages: vite: optional: true dependencies: - '@vue/devtools-core': 7.1.3(vite@5.2.11)(vue@3.4.27) - '@vue/devtools-kit': 7.1.3(vue@3.4.27) - '@vue/devtools-shared': 7.1.3 + '@vue/devtools-core': 7.2.0(vite@5.2.11)(vue@3.4.27) + '@vue/devtools-kit': 7.2.0(vue@3.4.27) + '@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 @@ -16927,8 +16920,8 @@ packages: - vue dev: false - /vite-plugin-vue-inspector@5.0.1(vite@5.2.11): - resolution: {integrity: sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==} + /vite-plugin-vue-inspector@5.1.0(vite@5.2.11): + resolution: {integrity: sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==} peerDependencies: vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 peerDependenciesMeta: