<template>
<vue-yup-validation
:schema=“schema“
@submit=“submit“
:values=“values“
:validFieldOnChange=“true“
v-slot=“{ errors }“
>
<h2>Form</h2>
<label for=“fname“>First name:</label>
<br />
<input type=“text“ id=“fname“ name=“fname“ v-model=“values.fname“ />
<p>
<span v-if=“errors?.fname“ class=“errors“> {{ errors?.fname }} </span>
</p>
<label for=“lname“>Last name:</label>
<br />
<input type=“text“ id=“lname“ name=“lname“ v-model=“values.lname“ />
<p>
<span v-if=“errors?.lname“ class=“errors“> {{ errors?.lname }} </span>
</p>
<input type=“submit“ value=“Submit“ />
</vue-yup-validation>
</template>

<script>
import * as yup from “yup“;
import VueYupValidation from “./components/index“;
export default {
components: {
VueYupValidation,
},
data() {
return {
schema: yup.object().shape({
fname: yup.string().required().min(5),
lname: yup.string().required().min(5),
}),
values: {
fname: ““,
lname: ““,
},
};
},
methods: {
submit(values) {
alert(“success“);
console.log({ values });
},
},
};
</script>

<style>
.errors {
color: red;
}
</style>