feat: add vue macros (#448)

2022-11-29 19:43:13 +08:00 · 2022-11-29 19:43:13 +08:00 · 2e425e13bd
commit 2e425e13bd
parent 9cf5fdc0ce
8 changed files with 332 additions and 17 deletions
--- a/README.md
+++ b/README.md
@ -84,6 +84,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [Pinia](https://pinia.vuejs.org) - Intuitive, type safe, light and flexible Store for Vue using the composition api
 - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
+- [`unplugin-vue-macros`](https://github.com/sxzz/unplugin-vue-macros) - Explore and extend more macros and syntax sugar to Vue.
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [`vite-plugin-vue-component-preview`](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview) - Preview single component in VSCode
 - [`vite-plugin-vue-markdown`](https://github.com/antfu/vite-plugin-vue-markdown) - Markdown as components / components in Markdown
--- a/package.json
+++ b/package.json
@ -32,6 +32,7 @@
    "@types/markdown-it-link-attributes": "^3.0.1",
    "@types/nprogress": "^0.2.0",
    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue-macros/volar": "^0.5.4",
    "@vue/test-utils": "^2.2.4",
    "critters": "^0.0.16",
    "cross-env": "^7.0.3",
@ -48,6 +49,7 @@
    "unocss": "^0.46.5",
    "unplugin-auto-import": "^0.11.5",
    "unplugin-vue-components": "^0.22.11",
+    "unplugin-vue-macros": "^1.0.0",
    "vite": "^3.2.4",
    "vite-plugin-inspect": "^0.7.9",
    "vite-plugin-pages": "^0.27.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,6 +8,7 @@ specifiers:
  '@types/nprogress': ^0.2.0
  '@unocss/reset': ^0.46.5
  '@vitejs/plugin-vue': ^3.2.0
+  '@vue-macros/volar': ^0.5.4
  '@vue/test-utils': ^2.2.4
  '@vueuse/core': ^9.5.0
  '@vueuse/head': ^1.0.18
@ -28,6 +29,7 @@ specifiers:
  unocss: ^0.46.5
  unplugin-auto-import: ^0.11.5
  unplugin-vue-components: ^0.22.11
+  unplugin-vue-macros: ^1.0.0
  vite: ^3.2.4
  vite-plugin-inspect: ^0.7.9
  vite-plugin-pages: ^0.27.1
@ -62,6 +64,7 @@ devDependencies:
  '@types/markdown-it-link-attributes': 3.0.1
  '@types/nprogress': 0.2.0
  '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
+  '@vue-macros/volar': 0.5.4_vue-tsc@1.0.9+vue@3.2.45
  '@vue/test-utils': 2.2.4_vue@3.2.45
  critters: 0.0.16
  cross-env: 7.0.3
@ -78,6 +81,7 @@ devDependencies:
  unocss: 0.46.5_vite@3.2.4
  unplugin-auto-import: 0.11.5_@vueuse+core@9.5.0
  unplugin-vue-components: 0.22.11_vue@3.2.45
+  unplugin-vue-macros: 1.0.0_jpfe37id6rtfx3qpjube5didlq
  vite: 3.2.4
  vite-plugin-inspect: 0.7.9_vite@3.2.4
  vite-plugin-pages: 0.27.1_vite@3.2.4
@ -205,6 +209,10 @@ packages:
    resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
    dev: true

+  /@antfu/utils/0.6.3:
+    resolution: {integrity: sha512-sEYpyyKUPOew9QsXZ8feRVMzW6DWLviwOl+/ap06UQW02A8Srbc95CPHVm4eUbiBzBgD46eyIT+przv//KSSlQ==}
+    dev: true
+
  /@antfu/utils/0.7.0:
    resolution: {integrity: sha512-tH38JQEFLOdvZJC32ZbPTvWOQzxEtOQh5jOqBPDLw8sxBr0PFF+f2Csgwb7mRpD0QB1xu+PDoAifIPiCNneeNA==}
    dev: true
@ -456,6 +464,11 @@ packages:
      '@babel/types': 7.18.9
    dev: true

+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /@babel/helper-validator-identifier/7.18.6:
    resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
    engines: {node: '>=6.9.0'}
@ -509,6 +522,14 @@ packages:
    dependencies:
      '@babel/types': 7.18.9

+  /@babel/parser/7.20.3:
+    resolution: {integrity: sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.2
+    dev: true
+
  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.9:
    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
    engines: {node: '>=6.9.0'}
@ -1356,6 +1377,15 @@ packages:
      '@babel/helper-validator-identifier': 7.18.6
      to-fast-properties: 2.0.0

+  /@babel/types/7.20.2:
+    resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
  /@colors/colors/1.5.0:
    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
    engines: {node: '>=0.1.90'}
@ -2312,7 +2342,7 @@ packages:
    resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
    dependencies:
      '@volar/source-map': 1.0.9
-      '@vue/reactivity': 3.2.40
+      '@vue/reactivity': 3.2.45
      muggle-string: 0.1.0
    dev: true

@ -2348,6 +2378,181 @@ packages:
      '@volar/vue-language-core': 1.0.9
    dev: true

+  /@vue-macros/api/0.2.0:
+    resolution: {integrity: sha512-E0rhhszd3MSE8l+A78gj9ONs4lsqOLHpONNzrc7H2nlPhEDsp4ZyQt+A9rRfxX+BTeLYfq64mli2qRV0tixiaw==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+      '@vue-macros/common': 0.13.4
+    dev: true
+
+  /@vue-macros/better-define/1.0.0:
+    resolution: {integrity: sha512-SVQky3fk9wRrSH153Tw1+0sP5i6OB5iiUOtAC/mceH0IN5NGbDXt2YagELEM2+6caDquXNRL6jbG0HfRH6u0cA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/api': 0.2.0
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/common/0.13.4:
+    resolution: {integrity: sha512-mQooO33XcY4kQyKBrbGfdIPPsYhpcfmH75SQnXx2vNsNLSNvhLuDaIIV0fhMJ0HV5Z02V9Ka1gx7v1g5bk9Q0A==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+      '@vue/compiler-sfc': 3.2.45
+      magic-string: 0.26.7
+    dev: true
+
+  /@vue-macros/define-model/1.0.0_@vueuse+core@9.5.0:
+    resolution: {integrity: sha512-Nyh1fidDcfCzEKAo/ljwdQbpgMOrNowdJomB/qnkz/Lx4CVEaRk87LA2o3T99qIOogRfya8af+bLM8dNOq8dAQ==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      '@vueuse/core': ^9.0.0
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      '@vueuse/core': 9.5.0_vue@3.2.45
+      ast-walker-scope: 0.3.0
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/define-props/0.0.3_vue@3.2.45:
+    resolution: {integrity: sha512-GAiALWSrIogwdjbIe60Hi4CSvWFmZG7KySK8JBf7lszWNgoSirj/NKzmJOaHY0/I217tfq4Ew/brbdvcEhCikg==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+      vue: 3.2.45
+    dev: true
+
+  /@vue-macros/define-render/1.0.0_vue@3.2.45:
+    resolution: {integrity: sha512-Szm25QnX65YaNMm/wbP4j2TdMKwkWQSGRU72/kadt1yH4/BzwjcQlQIYIpBxEnbYb3BeQyj0NGL5695E1jGqEg==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+      vue: 3.2.45
+    dev: true
+
+  /@vue-macros/define-slots/0.0.6_vue@3.2.45:
+    resolution: {integrity: sha512-pK4P/oUjcrP/Rr5clsV2eZ53OJ3QlU2fZlnn91w++L0+lio+0M06ptr/IkHNVLNQ9U9Z43MkjHkMLX8Df8BknA==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+      vue: 3.2.45
+    dev: true
+
+  /@vue-macros/hoist-static/1.0.0:
+    resolution: {integrity: sha512-NcFVAfKM9UjChOXy+yno4vhTsSHT6qUKbmd4/I8ucoiJT8IfFyGCwFoZZ8uqgjIwlzSUDxJ/vYoDRjiziTiNKg==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/named-template/0.0.6_vite@3.2.4+vue@3.2.45:
+    resolution: {integrity: sha512-nEoutSYbwu7QC+uWcs90rD28erP6xZ0aU4uYnrxTUnVcbga9xMchxcs3MgI/2ax6dz/EXf1f1utYXXpGgLi+Tw==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
+      '@vue-macros/common': 0.13.4
+      '@vue/compiler-dom': 3.2.45
+      unplugin: 1.0.0
+      unplugin-combine: 0.2.8_vite@3.2.4
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - vue
+      - webpack
+    dev: true
+
+  /@vue-macros/setup-block/0.0.1:
+    resolution: {integrity: sha512-Zr7yudMN7Q+8Rb/4ZuZzNewHTejeH9fbt3104sFK53XqL4uLkDCz0fIG2AD9bR71RA+12H+yqn/jQ3vP4OaKGA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      '@vue/compiler-dom': 3.2.45
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/setup-component/0.12.8_vite@3.2.4:
+    resolution: {integrity: sha512-2tRMl8l8OYMpIRYsZyAZfH0dNT7CONMTcmdGEffJb5GvK8XOmdgGk7NFUhaQg3EEnk1SUq1Kdcx+gyH/a0qE4A==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+      unplugin-combine: 0.2.8_vite@3.2.4
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
+  /@vue-macros/setup-sfc/0.12.8:
+    resolution: {integrity: sha512-eOQxlY53GD/WkJrDHpDvHecWQ70Cw9aSYwS9eT1dQ9vWJVeJ/2R96z09GfYKz6cr9T00OPeZjftU5sC1FO+3xA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/short-emits/1.0.0:
+    resolution: {integrity: sha512-lE4poL6cz1xnvNz/orBM0+wNwrWV3Jy+B8mYYwzuWjulhNl5L/QET319lQuZbkgTxVa7HFF6UBa3cALeQmR33Q==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/short-vmodel/1.0.0:
+    resolution: {integrity: sha512-lSOHoIbEy675V7TCqKEn9lxRJBE3BVVSz+KvZpsqdicQehceQnE3AiMxZX8fcHOe7s8MFpbCZJqqzjz1zqhUzg==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@vue-macros/common': 0.13.4
+      '@vue/compiler-core': 3.2.45
+    dev: true
+
+  /@vue-macros/volar/0.5.4_vue-tsc@1.0.9+vue@3.2.45:
+    resolution: {integrity: sha512-zOL/3CFuucnTTwStnb+INgeLp4K2/jKXj+wJ1eGRjhBree7CVMxpMK9m33WsSQhA0R+P2kRSp2HLRDnknZEGMQ==}
+    peerDependencies:
+      vue-tsc: ^1.0.9
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+    dependencies:
+      '@volar/language-core': 1.0.9
+      '@vue-macros/common': 0.13.4
+      '@vue-macros/define-props': 0.0.3_vue@3.2.45
+      '@vue-macros/short-vmodel': 1.0.0
+      muggle-string: 0.1.0
+      vue-tsc: 1.0.9_typescript@4.9.3
+    transitivePeerDependencies:
+      - vue
+    dev: true
+
  /@vue/compiler-core/3.2.37:
    resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
    dependencies:
@ -2812,6 +3017,14 @@ packages:
    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
    dev: true

+  /ast-walker-scope/0.3.0:
+    resolution: {integrity: sha512-bsOBv3jB+1kGaxwPHhkLiagS+75KfzEqtkNWvATgMGtXM6kJZG3PlG4fYQFMiHeLpoAkwc6G61w07+hEXx39aA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/parser': 7.20.3
+      '@babel/types': 7.20.2
+    dev: true
+
  /astral-regex/2.0.0:
    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
    engines: {node: '>=8'}
@ -8056,6 +8269,29 @@ packages:
      - rollup
    dev: true

+  /unplugin-combine/0.2.8_vite@3.2.4:
+    resolution: {integrity: sha512-Z38AC/TEjXbVyZ5HjVqo+lADj0/dcfwWC0Z4y0LNhybJzJQwmcMxm+ZsqHY3faauj4YigmlRMdptR5JEW9RuLg==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0 || ^3.0.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.6.3
+      unplugin: 0.10.2
+      vite: 3.2.4
+    dev: true
+
  /unplugin-vue-components/0.22.11_vue@3.2.45:
    resolution: {integrity: sha512-GTzqPl0Ek8fq8qMufjR6hvtnjnSwMpJ1Rg2Ez9AcKZVp1piWoU/Q4FDnI9wHVKX8eenYL0nqAF3ejYAk1TUfqQ==}
    engines: {node: '>=14'}
@ -8082,6 +8318,55 @@ packages:
      - supports-color
    dev: true

+  /unplugin-vue-define-options/1.0.0:
+    resolution: {integrity: sha512-j90zM7NhZXBL5uMlHKzSOjvU98lFcIErdgAhj7bEEdvZarkwOkEUgMFsZDwStN9FEcMAiS/BTvcyGfItu3ry/g==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      ast-walker-scope: 0.3.0
+      unplugin: 1.0.0
+    dev: true
+
+  /unplugin-vue-macros/1.0.0_jpfe37id6rtfx3qpjube5didlq:
+    resolution: {integrity: sha512-OWJZtMSwmGDqrgLPyFn2jqTGE0NAZimr3m8BsOtSq0rR5nhsvCvB5G+TNY1T3vW7o877DxPokhGYoBmH4NBXdQ==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/better-define': 1.0.0
+      '@vue-macros/define-model': 1.0.0_@vueuse+core@9.5.0
+      '@vue-macros/define-props': 0.0.3_vue@3.2.45
+      '@vue-macros/define-render': 1.0.0_vue@3.2.45
+      '@vue-macros/define-slots': 0.0.6_vue@3.2.45
+      '@vue-macros/hoist-static': 1.0.0
+      '@vue-macros/named-template': 0.0.6_vite@3.2.4+vue@3.2.45
+      '@vue-macros/setup-block': 0.0.1
+      '@vue-macros/setup-component': 0.12.8_vite@3.2.4
+      '@vue-macros/setup-sfc': 0.12.8
+      '@vue-macros/short-emits': 1.0.0
+      local-pkg: 0.4.2
+      unplugin-combine: 0.2.8_vite@3.2.4
+      unplugin-vue-define-options: 1.0.0
+      vue: 3.2.45
+    transitivePeerDependencies:
+      - '@vueuse/core'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
+  /unplugin/0.10.2:
+    resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
+    dependencies:
+      acorn: 8.8.1
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.6
+    dev: true
+
  /unplugin/1.0.0:
    resolution: {integrity: sha512-H5UnBUxfhTXBXGo2AwKsl0UaLSHzSNDZNehPQSgdhVfO/t+XAS1Yoj3vmLrrlBrS9ZwtH5tejbX/TCp5DcyCKg==}
    dependencies:
--- a/src/components.d.ts
+++ b/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']
--- a/src/components/Input.vue
+++ b/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>
--- a/src/pages/index.vue
+++ b/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>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -21,11 +21,18 @@
      "vite-plugin-pages/client",
      "vite-plugin-vue-component-preview/client",
      "vite-plugin-vue-layouts/client",
-      "vite-plugin-pwa/client"
+      "vite-plugin-pwa/client",
+      "unplugin-vue-macros/macros-global"
    ],
    "paths": {
      "~/*": ["src/*"]
    }
  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/define-slots"
+    ]
+  },
  "exclude": ["dist", "node_modules", "cypress"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -14,6 +14,7 @@ import Inspect from 'vite-plugin-inspect'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
 import Shiki from 'markdown-it-shiki'
+import VueMacros from 'unplugin-vue-macros/vite'

 export default defineConfig({
  resolve: {
@ -25,9 +26,13 @@ export default defineConfig({
  plugins: [
    Preview(),

-    Vue({
-      include: [/\.vue$/, /\.md$/],
-      reactivityTransform: true,
+    VueMacros({
+      plugins: {
+        vue: Vue({
+          include: [/\.vue$/, /\.md$/],
+          reactivityTransform: true,
+        }),
+      },
    }),

    // https://github.com/hannoeru/vite-plugin-pages