Vue 3 Form Validation with Vee Validate + Yup

index.vue

<script setup lang="ts">
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'

const schema = yup.object().shape({
  email: yup
    .string()
    .email('Email tidak valid')
    .required((data) => `${data.path} harus diisi`),
  password: yup
    .string()
    .min(5, (data) => `Password minimal ${data.min} karakter`)
    .required((data) => `${data.label} harus diisi`)
    .label('Password'),
})

const onSubmit = (values: Record<string, any>) => {
  console.log(values)
}
</script>

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" placeholder="email" />
    <ErrorMessage name="email" />
    <Field name="password" placeholder="password" />
    <ErrorMessage name="password" />
    <button type="submit">Submit</button>
  </Form>
</template>