Form Validation in Vue 3 with VeeValidate & Yup

Form Validation Architecture

<script setup>
import { useForm, useField } from 'vee-validate'
import * as yup from 'yup'

const schema = yup.object({
    email: yup.string().required().email(),
    password: yup.string().required().min(8)
})

const { handleSubmit, errors } = useForm({ validationSchema: schema })
const { value: email } = useField('email')
const { value: password } = useField('password')

const onSubmit = handleSubmit(values => console.log('Payload:', values))
</script>