feat: add vue macros (#32)

2022-11-30 08:06:29 +08:00 · 2022-11-30 08:06:29 +08:00 · 82ca803748
commit 82ca803748
parent 473f4ee106
7 changed files with 337 additions and 13 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    Counter: typeof import('./src/components/Counter.vue')['default']
    Footer: typeof import('./src/components/Footer.vue')['default']
+    Input: typeof import('./src/components/Input.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
--- a/package.json
+++ b/package.json
@ -21,6 +21,7 @@
    "@types/node": "^18.11.9",
    "@unocss/reset": "^0.46.5",
    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue-macros/volar": "^0.5.4",
    "@vue/test-utils": "^2.2.4",
    "eslint": "^8.28.0",
    "jsdom": "^20.0.3",
@ -30,6 +31,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-pages": "^0.27.1",
    "vitest": "^0.25.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -6,6 +6,7 @@ specifiers:
  '@types/node': ^18.11.9
  '@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
  eslint: ^8.28.0
@ -16,6 +17,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-pages: ^0.27.1
  vitest: ^0.25.2
@ -34,6 +36,7 @@ devDependencies:
  '@types/node': 18.11.9
  '@unocss/reset': 0.46.5
  '@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
  eslint: 8.28.0
  jsdom: 20.0.3
@ -43,6 +46,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_@types+node@18.11.9
  vite-plugin-pages: 0.27.1_vite@3.2.4
  vitest: 0.25.2_jsdom@20.0.3
@ -163,6 +167,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
@ -174,6 +182,11 @@ packages:
      '@babel/highlight': 7.18.6
    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'}
@ -199,6 +212,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/types/7.18.9:
    resolution: {integrity: sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==}
    engines: {node: '>=6.9.0'}
@ -206,6 +227,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
+
  /@esbuild/android-arm/0.15.12:
    resolution: {integrity: sha512-IC7TqIqiyE0MmvAhWkl/8AEzpOtbhRNDo7aph47We1NbE5w2bt/Q+giAhe0YYeVpYnIhGMcuZY92qDK6dQauvA==}
    engines: {node: '>=12'}
@ -438,6 +468,14 @@ packages:
    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
    dev: true

+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
  /@rollup/pluginutils/5.0.2:
    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
    engines: {node: '>=14.0.0'}
@ -853,6 +891,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.41:
    resolution: {integrity: sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==}
    dependencies:
@ -1173,6 +1386,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
+
  /asynckit/0.4.0:
    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
    dev: true
@ -4586,6 +4807,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_@types+node@18.11.9
+    dev: true
+
  /unplugin-vue-components/0.22.11_vue@3.2.45:
    resolution: {integrity: sha512-GTzqPl0Ek8fq8qMufjR6hvtnjnSwMpJ1Rg2Ez9AcKZVp1piWoU/Q4FDnI9wHVKX8eenYL0nqAF3ejYAk1TUfqQ==}
    engines: {node: '>=14'}
@ -4612,6 +4856,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/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,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
--- a/tsconfig.json
+++ b/tsconfig.json
@ -16,11 +16,18 @@
    "forceConsistentCasingInFileNames": true,
    "types": [
      "vite/client",
-      "vite-plugin-pages/client"
+      "vite-plugin-pages/client",
+      "unplugin-vue-macros/macros-global"
    ],
    "paths": {
      "~/*": ["src/*"]
    }
  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/define-slots"
+    ]
+  },
  "exclude": ["dist", "node_modules"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -7,6 +7,7 @@ import Pages from 'vite-plugin-pages'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Unocss from 'unocss/vite'
+import VueMacros from 'unplugin-vue-macros/vite'

 export default defineConfig({
  resolve: {
@ -15,8 +16,12 @@ export default defineConfig({
    },
  },
  plugins: [
-    Vue({
-      reactivityTransform: true,
+    VueMacros({
+      plugins: {
+        vue: Vue({
+          reactivityTransform: true,
+        }),
+      },
    }),

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