Vuelidate 2 集成 NuxtJS 2 异常：属性读取报错且表单校验失效

问题根源 #

你遇到的两个报错都是两个配置错误共同导致的：

1. @vue/composition-api 重复注册，导致组件实例上下文混乱，Vuelidate 无法正常获取组件内的响应式数据
2. Vuelidate 2 的混合用法错误，你同时使用了 Options API 的 validations 选项和 Composition API 的 useVuelidate 调用，但没有给 useVuelidate 传入必要的规则和数据参数，导致校验实例初始化失败。

解决步骤 #

第一步：修复 Composition API 重复注册 #

• 先检查你的 package.json 是否安装了 @nuxtjs/composition-api 依赖：
  • 如果已安装：删除你自行编写的 plugins/composition-api.js 文件，同时删除 nuxt.config.js 中对应的插件注册配置，在 nuxt.config.js 的 buildModules 数组中添加 '@nuxtjs/composition-api/module'，由官方模块统一处理 Composition API 注册，避免重复。
  • 如果未安装：排查其他第三方插件/模块的注册逻辑，删除其他位置的 Vue.use(VueCompositionAPI) 调用，仅保留你现有插件中的单次注册即可。

第二步：修正 Vuelidate 用法 #

两种可选用法，不要混合使用：

方案1：全 Composition API 写法（更推荐适配 Vuelidate 2）

将状态、校验规则都移入 setup 内声明，给 useVuelidate 传入对应参数：

<script>
import { ref } from '@vue/composition-api'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

export default {
  setup () {
    // 定义表单状态
    const contact = ref({
      name: ''
    })
    // 定义校验规则
    const validationRules = {
      contact: {
        name: { required }
      }
    }
    // 初始化校验实例，传入规则、对应状态，开启autoDirty自动标记修改状态
    const v$ = useVuelidate(validationRules, { contact }, { $autoDirty: true })
    return { v$, contact }
  },
  methods: {
    async submitForm () {
      const isFormValid = await this.v$.$validate()
      if (isFormValid) {
        console.log('valid!!!')
      }
    }
  }
}
</script>

模板部分不需要修改，原有逻辑可以正常运行。

方案2：全 Options API 写法

如果要继续使用 validations 选项，不需要写 setup 函数，全局注册 Vuelidate 插件即可：

1. 新建 plugins/vuelidate.js：

import Vue from 'vue'
import Vuelidate from '@vuelidate/core'
Vue.use(Vuelidate)

2. 在 nuxt.config.js 的 plugins 数组中注册该插件，删除组件内的 setup 函数和 useVuelidate 引入即可。

内容的提问来源于stack exchange，提问作者amirify