refactor: convert all SFCs to script setup

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

AGENTS.md

@@ -3,6 +3,7 @@
 - AGENTS.md is the source of truth. CLAUDE.md is a symlink to it.
 - Always use Vue's `shallowRef` over `ref` by default. Using `ref` requires a solid justification and a code comment explaining why deep reactivity is needed.
 - Always use `defineComponent()` to define components. Never use bare `{ setup() {} }` objects — they lack component scope, so `inject`, `watch`, and `onScopeDispose` won't work correctly.
+- Vue SFCs must use `<script setup>` unless there's an explicit reason not to.
 - After completing any task, run `vp run ready` (or `vpr ready`) to verify: lint, type-check, test all packages, and build.
 
 <!--VITE PLUS START-->

examples/basic-template/src/App.vue

@@ -1,21 +1,14 @@
-<script lang="ts">
-import { shallowRef, defineComponent } from "vue";
+<script setup lang="ts">
+import { shallowRef } from "vue";
 import { Box, Text, useInput } from "@vue-tui/runtime";
 import Counter from "./Counter.vue";
 import Clock from "./Clock.vue";
 
-export default defineComponent({
-  components: { Box, Text, Counter, Clock },
-  setup() {
-    const showClock = shallowRef(true);
+const showClock = shallowRef(true);
 
-    useInput((input) => {
-      if (input === "c") showClock.value = !showClock.value;
-      if (input === "q") process.exit(0);
-    });
-
-    return { showClock };
-  },
+useInput((input) => {
+  if (input === "c") showClock.value = !showClock.value;
+  if (input === "q") process.exit(0);
 });
 </script>
 

examples/basic-template/src/Clock.vue

@@ -1,25 +1,18 @@
-<script lang="ts">
-import { shallowRef, onMounted, onUnmounted, defineComponent } from "vue";
+<script setup lang="ts">
+import { shallowRef, onMounted, onUnmounted } from "vue";
 import { Box, Text } from "@vue-tui/runtime";
 
-export default defineComponent({
-  components: { Box, Text },
-  setup() {
-    const time = shallowRef(new Date().toLocaleTimeString());
-    let timer: ReturnType<typeof setInterval>;
+const time = shallowRef(new Date().toLocaleTimeString());
+let timer: ReturnType<typeof setInterval>;
 
-    onMounted(() => {
-      timer = setInterval(() => {
-        time.value = new Date().toLocaleTimeString();
-      }, 1000);
-    });
+onMounted(() => {
+  timer = setInterval(() => {
+    time.value = new Date().toLocaleTimeString();
+  }, 1000);
+});
 
-    onUnmounted(() => {
-      clearInterval(timer);
-    });
-
-    return { time };
-  },
+onUnmounted(() => {
+  clearInterval(timer);
 });
 </script>
 

examples/basic-template/src/Counter.vue

@@ -1,19 +1,12 @@
-<script lang="ts">
-import { shallowRef, defineComponent } from "vue";
+<script setup lang="ts">
+import { shallowRef } from "vue";
 import { Box, Text, useInput } from "@vue-tui/runtime";
 
-export default defineComponent({
-  components: { Box, Text },
-  setup() {
-    const count = shallowRef(0);
+const count = shallowRef(0);
 
-    useInput((input) => {
-      if (input === "+") count.value++;
-      if (input === "-") count.value--;
-    });
-
-    return { count };
-  },
+useInput((input) => {
+  if (input === "+") count.value++;
+  if (input === "-") count.value--;
 });
 </script>