Vuelidate TypeError when using with Vue 3 - vuelidate

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')