feat: add interactive astro island using vue

package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.10",
+    "@astrojs/vue": "^5.0.3",
     "astro": "^5.1.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "prettier": "^3.4.2",

src/components/Greeting.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{ messages: string[] }>();
+const greeting = ref(props.messages[0]);
+const randomMessage = () => {
+  greeting.value =
+    props.messages[Math.floor(Math.random() * props.messages.length)];
+};
+</script>
+
+<template>
+  <div>
+    <h3>{{ greeting }}! Thanks for stopping by!</h3>
+    <button @click="randomMessage">New greeting</button>
+  </div>
+</template>

src/pages/index.astro

@@ -1,9 +1,12 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import Greeting from "../components/Greeting.vue";
 
 const pageTitle = "Orbital Orbit";
 ---
 
 <BaseLayout pageTitle={pageTitle}>
   <h2>My awesome blog subtitle</h2>
+
+  <Greeting client:load messages={["Hi", "Hello", "Howdy", "Hey there"]} />
 </BaseLayout>

tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
-}
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}