How to use vee-validate 4 (alpha) with Vuetify for validation? - vuetify.js

Question

I am trying to use the latest alpha release of vee-validate. Is it possible to use vee-validate 4 (alpha)'s Form and Field components with Vuetify for validation?
In the example in Vuetify documentation for validation with vee-validate, it only shows use of validation-observer and validation-provider.

Answer 1

Here a good example for veevalidate4, vuejs3 and vuetify3 (typescript,nuxtjs and YUP):
example configuration
in practice
<template>
<div>
<v-app id="inspire">
<v-container fluid fill-height>
<v-row vertical-align="center">
<v-col lg="6" sm="12" align-self="center" offset-lg="3">
<v-card class="elevation-12">
<v-toolbar dark color="success">
<v-toolbar-title>Se connecter</v-toolbar-title>
</v-toolbar>
<v-card-text>
<Form #submit="onSubmit" :validation-schema="schema">
<Field name="username" v-slot="{ field, errors }">
<v-text-field
name="username"
label="Login"
type="email"
v-bind="field"
variant="solo"
append-inner-icon="mdi-magnify"
:error-messages="errors"
></v-text-field>
</Field>
<Field name="password" v-slot="{ field, errors }">
<v-text-field
id="password"
prepend-inner-icon="fa:fas fa-lock"
name="password"
label="Password"
v-bind="field"
type="password"
variant="solo"
:error-messages="errors"
></v-text-field>
</Field>
<v-btn
block
color="success"
size="large"
type="submit"
>
Se connecter
</v-btn>
</Form>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</template>
<script lang="ts" setup>
const {REST_API_URL} = useRuntimeConfig();
import {Form, Field, ErrorMessage} from "vee-validate";
import * as Yup from "yup";
const schema = Yup.object().shape({
username: Yup.string().required("Email is mandatory.").email("The email
entered doesn’t seem right, please try again."),
password: Yup.string().required("Full name is mandatory."),
});
const props = defineProps({
source: String,
})
function onSubmit(values: any) {
console.log('Submitted with', values);
const {data: token, error, pending} = useFetch(REST_API_URL + '/auth/signin', {method: "POST", body: values})
}

Answer 2

vee-validate v4 does not support Vue 2 at the moment unless Vuetify has also released support for Vue 3 there is no way to use the two at the moment.
Supporting Vue 2 and 3 at the same time is a very hard task for complex libraries such as Vuetify and vee-validate