switch to nuxt

app/app.vue

@@ -0,0 +1,4 @@
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtPage />
+</template>

app/components/Alert.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="alert" :style="{ 'border-color': color }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { color } = defineProps({
+	color: {
+		type: String,
+		default: "orange",
+	},
+});
+</script>
+
+<style scoped>
+.alert {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 2px solid;
+  border-radius: 0.5rem;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+</style>

app/components/Counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>Counter: {{ count }}</h3>
+    <button @click="increment">
+      Increment
+    </button>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0);
+
+const increment = () => {
+	count.value++;
+};
+
+const decrement = () => {
+	count.value--;
+};
+</script>
+
+<style scoped>
+button {
+  margin: 5px;
+}
+</style>

app/pages/[...slug].vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: page } = await useAsyncData("page-" + route.path, () => {
+	return queryCollection("content").path(route.path).first();
+});
+
+if (!page.value) {
+	throw createError({
+		statusCode: 404,
+		statusMessage: "Page not found",
+		fatal: true,
+	});
+}
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+  />
+</template>