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

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

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

Answer 2

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

}