@vee-validate/yup
Official vee-validate integration with Yup schema validation
Getting started
You can use yup as a typed schema with the @vee-validate/yup
package:
npm install @vee-validate/yup
yarn add @vee-validate/yup
pnpm add @vee-validate/yup
The @vee-valdiate/yup
package exposes a toTypedSchema
function that accepts any yup schema. Which then you can pass along to validationSchema
option on useForm
.
This makes the form values and submitted values typed automatically and caters for both input and output types of that schema.
import { useForm } from 'vee-validate';
import { object, string } from 'yup';
import { toTypedSchema } from '@vee-validate/yup';
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object({
email: string().required(),
password: string().required(),
name: string(),
})
),
});
values.email.endsWith('@gmail.com');
handleSubmit(submitted => {
submitted.email.endsWith('@gmail.com');
submitted.name.length;
});
Yup default values
You can also define default values on your schema directly and it will be picked up by the form:
import { useForm } from 'vee-validate';
import { object, string } from 'yup';
import { toTypedSchema } from '@vee-validate/yup';
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object({
email: string().required().default('something@email.com'),
password: string().required().default(''),
name: string().default(''),
})
),
});
Your initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.
Yup transforms
You can also define transforms to cast your fields before submission:
import { useForm } from 'vee-validate';
import { object, number } from 'yup';
import { toTypedSchema } from '@vee-validate/yup';
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object({
age: number()
.transform(val => Number(val))
.required(),
})
),
});
But note that this does not change the input or output types of the casted fields. The cast will only occur when setting the initial value and when the values are submitted.