Nuxt 3 使用 defineModel 报错：is a compiler-hint helper

发生背景

看着 Vue 3.3 新的编译器宏 defineModel 用着方便。

于是升级到了 Nuxt 3.6，想试用一下这颗新糖，但没仔细看 changelog 于是有了这篇文。

相关代码

<script lang="ts" setup>：

export interface Props {
  disabled?: boolean;
}

defineProps<Props>();
const value = defineModel<bigint>();

function handleInput(v: string) {
  if (v.startsWith('1')) value.value = BigInt(v);
  else value.value = 0n;
}

报错信息

[Vue warn]: defineModel() is a compiler-hint helper that is only usable inside <script setup> of a single file component. Its arguments should be compiled away and passing it at runtime has no effect. 

解决方案

nuxt.config.ts：

 import viteLegacy from '@vitejs/plugin-legacy';
 export default defineNuxtConfig({
   modules: [
     '@nuxtjs/tailwindcss',
   ],
   vite: {
+    vue: {
+      script: {
+        defineModel: true,
+      },
+    },
     plugins: [
       viteLegacy({
         targets: ['chrome >= 77'],
       }),
     ],
   },
 });

发生原因

这是一个实验性功能。

但为什么警告是 is a compiler-hint helper 而不是 is a experimental feature，推测应该是 Nuxt 自动导入了 defineModel。

但为什么需要手动重启开发服务器才能正常使用，有待斟酌。

参考资料

• Nuxt Issue #20881