feat: add vue macros (#448)

src/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Counter: typeof import('./components/Counter.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']
+    Input: typeof import('./components/Input.vue')['default']
     README: typeof import('./components/README.md')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

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,7 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'IndexPage',
+})
 const user = useUserStore()
 const name = $ref(user.savedName)
 
@@ -27,21 +30,12 @@ const { t } = useI18n()
 
     <div py-4 />
 
-    <input
-      id="input"
+    <Input
       v-model="name"
-      :placeholder="t('intro.whats-your-name')"
-      :aria-label="t('intro.whats-your-name')"
-      type="text"
+      placeholder="What's your name?"
       autocomplete="false"
-      p="x4 y2"
-      w="250px"
-      text="center"
-      bg="transparent"
-      border="~ rounded gray-200 dark:gray-700"
-      outline="none active:none"
       @keydown.enter="go"
-    >
+    />
     <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
 
     <div>