与 Vue 3 一起使用时出现 Vuelidate TypeError

Question

I'm trying to use Vuelidate with Vue 3. When I try and add some validators to a component I get the following error:

index.js?1dce:614 Uncaught (in promise) TypeError: Cannot read property 'super' of undefined

I believe this is to do with the way I am using Vuelidate with the Vue instance. Here is my main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import Vuelidate from 'vuelidate';

const app = createApp(App);
app.use(Vuelidate);
app.mount('#app');

I will also include the component code:

<template>
  <div id="signup">
    <div class="signup-form">
      <form>
        <div class="input">
          <label for="email">Mail</label>
          <input
                  type="email"
                  id="email"
                  @input="$v.email.$touch()"
                  v-model="email">
                  <div>{{ $v }}</div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import { required, email } from 'vuelidate/lib/validators'

  export default {
    data () {
      return {
        email: '',
      }
    },
    validations: {
      email: {
        required: required,
        email: email
      }
    }
    }
  }
</script>

Does anyone know how to fix this? If Vue 3 is not compatible with Vuelidate, can anyone recommend and alternative that is?

Thanks

Answer 1

From your example, it looks like you are using Vuelidate for Vue 2. Vuelidate for Vue 3 is in alpha (as at the time of writing 30 Sep 2020) but you can still use it. Just install the following libraries.

npm install @vuelidate/core @vuelidate/validators
# or 
yarn add @vuelidate/core @vuelidate/validators

You can still use the Options API approach that you are using in your example or move to the Composition API approach.

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

export default {
  setup () {
    const email = ref('')
    const rules = {
      email: { required, email }
    }

    const $v = useVuelidate(rules, { email })

    return { email, $v }
  }
}

I haven't tried it myself but I hope this helps you.

Until it hits production-ready, you can find more information from the following links:

• Github repo: https://github.com/vuelidate/vuelidate/tree/next
• vuelidate@next doco: https://vuelidate-next.netlify.app/

EDIT: I forgot to mention that if you continue to use the Options API approach you need to change your import statement in main.js to the following:

import { createApp } from 'vue'
import App from './App.vue'
import { VuelidatePlugin } from '@vuelidate/core'

const app = createApp(App)
app.use(VuelidatePlugin)
app.mount('#app')