diff --git a/packages/astro/e2e/fixtures/vue/astro.config.mjs b/packages/astro/e2e/fixtures/vue/astro.config.mjs
new file mode 100644
index 000000000..881930612
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [vue()],
+});
diff --git a/packages/astro/e2e/fixtures/vue/package.json b/packages/astro/e2e/fixtures/vue/package.json
new file mode 100644
index 000000000..86b0c0673
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/vue",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*",
+    "vue": "^3.2.33"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
new file mode 100644
index 000000000..d5d5215f7
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="counter">
+		<button @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button @click="add()">+</button>
+	</div>
+	<div class="counter-message">
+		<slot />
+	</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+	setup() {
+		const count = ref(0);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+
+		return {
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>
+
+<style>
+.counter {
+	display: grid;
+	font-size: 2em;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	margin-top: 2em;
+	place-items: center;
+}
+.counter-message {
+	text-align: center;
+}
+</style>
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
new file mode 100644
index 000000000..77327247b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
@@ -0,0 +1,26 @@
+---
+import Counter from '../components/Counter.vue';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Counter id="counter-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="counter-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+    <Counter id="counter-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f0a004249..422238ffb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -711,6 +711,16 @@ importers:
       '@astrojs/tailwind': link:../../../../integrations/tailwind
       astro: link:../../..
 
+  packages/astro/e2e/fixtures/vue:
+    specifiers:
+      '@astrojs/vue': workspace:*
+      astro: workspace:*
+      vue: ^3.2.33
+    dependencies:
+      '@astrojs/vue': link:../../../../integrations/vue
+      astro: link:../../..
+      vue: 3.2.33
+
   packages/astro/test/fixtures/0-css:
     specifiers:
       '@astrojs/react': workspace:*
