feat: add vue macros (#32)

src/components/Input.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { modelValue } = defineModel<{
+  modelValue: string
+}>()
+</script>
+
+<template>
+  <input
+    id="input"
+    v-model="modelValue"
+    type="text"
+    v-bind="$attrs"
+    p="x-4 y-2"
+    w="250px"
+    text="center"
+    bg="transparent"
+    border="~ rounded gray-200 dark:gray-700"
+    outline="none active:none"
+  >
+</template>

src/pages/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'IndexPage',
+})
+
 const name = $ref('')
 
 const router = useRouter()
@@ -22,20 +26,12 @@ const go = () => {
 
     <div py-4 />
 
-    <input
-      id="input"
+    <Input
       v-model="name"
       placeholder="What's your name?"
-      type="text"
       autocomplete="false"
-      p="x-4 y-2"
-      w="250px"
-      text="center"
-      bg="transparent"
-      border="~ rounded gray-200 dark:gray-700"
-      outline="none active:none"
       @keydown.enter="go"
-    >
+    />
 
     <div>
       <button