使用Vuelidate时出现Cannot read properties of undefined (reading 'use')错误求助

错误原因 #

1. Vue3不再导出全局Vue构造函数，你代码中从vue导入的Vue是undefined，调用Vue.use()自然会抛出错误。
2. 旧版vuelidate包仅兼容Vue2，Vue3需要使用官方维护的@vuelidate/core和@vuelidate/validators包。

解决方案 #

1. 安装Vue3兼容的Vuelidate版本 #

先卸载旧包，再安装适配Vue3的新包：

npm uninstall vuelidate
npm install @vuelidate/core @vuelidate/validators

2. 修改项目入口代码 #

Vue3中需要通过createApp创建的应用实例来注册插件，而非全局Vue对象：

import { createApp } from 'vue'
import App from './App.vue'
// 导入Vue3版本的Vuelidate插件
import { VuelidatePlugin } from '@vuelidate/core'

const app = createApp(App)
// 注册插件到应用实例
app.use(VuelidatePlugin)
app.mount('#app')

3. 组件内使用示例 #

在Vue组件中通过useVuelidate组合式API实现表单验证：

import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup() {
    // 定义需要验证的表单状态
    const formState = reactive({
      email: '',
      password: ''
    })
    // 配置验证规则
    const validationRules = {
      email: { required, email },
      password: { required }
    }
    // 创建验证实例
    const v$ = useVuelidate(validationRules, formState)

    return { v$, formState }
  }
}

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