fix(vue): run devtools plugins only in the client environment

.changeset/friendly-vue-devtools.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix dev server crashes when Vue devtools are enabled with Vite 8.

packages/integrations/vue/src/index.ts

@@ -136,13 +136,22 @@ 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 : {};
-		plugins.push(
-			configEnvironmentPlugin(),
+		const devToolsOptions =
+			typeof options.devtools === 'object' && options.devtools ? options.devtools : {};
+		const devToolsPlugins = (
 			vueDevTools({
 				...devToolsOptions,
 				appendTo: VIRTUAL_MODULE_ID,
-			}),
+			}) as Plugin[] | Plugin[][]
+		).flat();
+		plugins.push(
+			configEnvironmentPlugin(),
+			...devToolsPlugins.map((plugin) => ({
+				...plugin,
+				applyToEnvironment: (
+					environment: Parameters<NonNullable<Plugin['applyToEnvironment']>>[0],
+				) => environment.name === 'client',
+			})),
 		);
 	}
 

packages/integrations/vue/test/basics.test.ts

@@ -1,7 +1,7 @@
 import * as assert from 'node:assert/strict';
-import { before, describe, it } from 'node:test';
+import { after, before, describe, it } from 'node:test';
 import { parseHTML } from 'linkedom';
-import { type Fixture, loadFixture } from './test-utils.ts';
+import { type DevServer, type Fixture, loadFixture } from './test-utils.ts';
 
 describe('Basics', () => {
 	let fixture: Fixture;
@@ -47,4 +47,21 @@ describe('Basics', () => {
 		const allPreValues = [...document.querySelectorAll('pre')].map((e) => e.textContent);
 		assert.deepEqual(allPreValues, ['2345', '0', '1', '1', '1', '10', '100', '1000']);
 	});
+
+	describe('dev', () => {
+		let devServer: DevServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('starts with Vue devtools enabled', async () => {
+			const response = await fixture.fetch('/');
+			assert.equal(response.status, 200);
+		});
+	});
 });

packages/integrations/vue/test/fixtures/basics/astro.config.mjs

@@ -2,5 +2,5 @@ import vue from '@astrojs/vue';
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
-  integrations: [vue({ jsx: true })],
+  integrations: [vue({ devtools: true, jsx: true })],
 })