Is there anyone who has successfully implemented Vuelidate with Vue 3 using the Composition API? Although Vuelidate is still in alpha for Vue 3, I believe that if it works with the Composition API, there must be a way to make it work with classes as well.
I am currently experimenting with a simple example:
<template>
<input
v-model="v$.login.$model"
:class="{ wrongInput: v$.login.$errors.lenght }"
placeholder="Login"
/>
</template>
<script lang="ts">
import { Vue } from 'vue-class-component';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';
export default class LoginForm extends Vue {
login = '';
v$ = useVuelidate();
validations() {
return {
login: {
required,
},
};
}
}
</script>
However, I encountered the following error:
Uncaught (in promise) TypeError: _ctx.v$.login is undefined
According to the documentation, it seems like I need to pass rules and state to useVuelidate(), but I am unsure how to do this or if it is causing the error. Any assistance would be greatly appreciated.