@vee-validate/zod

Official vee-validate integration with Zod schema validation

Guide

Zod is an excellent library for value validation which mirrors static typing APIs.

In their own words it is a:

TypeScript-first schema validation with static type inference

You can use zod as a typed schema with the @vee-validate/zod package:

1# npm
2npm install @vee-validate/zod
3# yarn
4yarn add @vee-validate/zod
5# pnpm
6pnpm add @vee-validate/zod

The @vee-valdiate/zod package exposes a toTypedSchema function that accepts any zod 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.

1import { useForm } from 'vee-validate';
2import { object, string } from 'zod';
3import { toTypedSchema } from '@vee-validate/zod';
4
5const { values, handleSubmit } = useForm({
6  validationSchema: toTypedSchema(
7    object({
8      email: string().min(1, 'required'),
9      password: string().min(1, 'required'),
10      name: string().optional(),
11    })
12  ),
13});
14
15// ❌ Type error, which means `values` is type-safe
16values.email.endsWith('@gmail.com');
17
18handleSubmit(submitted => {
19  // No errors, because email is required!
20  submitted.email.endsWith('@gmail.com');
21
22  // ❌ Type error, because `name` is not required so it could be undefined
23  // Means that your fields are now type safe!
24  submitted.name.length;
25});

Zod default values

You can also define default values on your zod schema directly and it will be picked up by the form:

1import { useForm } from 'vee-validate';
2import { object, string } from 'zod';
3import { toTypedSchema } from '@vee-validate/zod';
4
5const { values, handleSubmit } = useForm({
6  validationSchema: toTypedSchema(
7    object({
8      email: string().default('something@email.com'),
9      password: string().default(''),
10    })
11  ),
12});

Your initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.

Zod preprocess

You can also define preprocessors to cast your fields before submission:

1import { useForm } from 'vee-validate';
2import { object, number, preprocess } from 'zod';
3import { toTypedSchema } from '@vee-validate/zod';
4
5const { values, handleSubmit } = useForm({
6  validationSchema: toTypedSchema(
7    object({
8      age: preprocess(val => Number(val), number()),
9    })
10  ),
11});
12
13// typed as `unknown` since the source value can be anything
14values.age;
15
16handleSubmit(submitted => {
17  // will be typed as number because zod made sure it is!
18  values.age;
19});