3 files changed, 56 insertions, 6 deletions
diff --git a/examples/fast-build/src/components/Counter.vue b/examples/fast-build/src/components/Counter.vue
new file mode 100644
index 000000000..599bcf615
--- /dev/null
+++ b/examples/fast-build/src/components/Counter.vue
@@ -0,0 +1,24 @@
+<template>
+	<div id="vue" class="counter">
+		<button @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button @click="add()">+</button>
+	</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>
diff --git a/examples/fast-build/src/pages/[pokemon].astro b/examples/fast-build/src/pages/[pokemon].astro
new file mode 100644
index 000000000..ea01cc4f7
--- /dev/null
+++ b/examples/fast-build/src/pages/[pokemon].astro
@@ -0,0 +1,20 @@
+---
+import Greeting from '../components/Greeting.vue';
+
+export async function getStaticPaths() {
+  const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=2000`);
+  const result = await response.json();
+  const allPokemon = result.results;
+  return allPokemon.map(pokemon => ({params: {pokemon: pokemon.name}, props: {pokemon}}));
+}
+---
+<html lang="en">
+  <head>
+    <title>Hello</title>
+  </head>
+
+  <body>
+    <h1>{Astro.props.pokemon.name}</h1>
+    <Greeting client:load />
+  </body>
+</html>
+\ No newline at end of file
diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro
index 2bdadbf5b..ee228aa19 100644
--- a/examples/fast-build/src/pages/index.astro
+++ b/examples/fast-build/src/pages/index.astro
@@ -2,6 +2,7 @@
 import imgUrl from '../images/penguin.jpg';
 import grayscaleUrl from '../images/random.jpg?grayscale=true';
 import Greeting from '../components/Greeting.vue';
+import Counter from '../components/Counter.vue';
 ---
 
 <html>
@@ -26,9 +27,14 @@ import Greeting from '../components/Greeting.vue';
 			<Greeting />
 		</section>
 
-		<section>
-			<h1>ImageTools</h1>
-			<img src={grayscaleUrl} />
-		</section>
-	</body>
-</html>
+  <section>
+    <h1>ImageTools</h1>
+    <img src={grayscaleUrl} />
+  </section>
+
+  <section>
+    <h1>Hydrated component</h1>
+    <Counter client:idle />
+  </section>
+</body>
+</html>
+\ No newline at end of file