@vee-validate/zod

Official vee-validate integration with Zod schema validation

Getting Started

This official vee-validate plugin allows you to use zod schemas as a drop-in replacement for yup.

Install

Install these packages vee-validate, zod and @vee-validate/zod.

yarn add vee-validate zod @vee-validate/zod

# or with NPM

npm install vee-validate zod @vee-validate/zod

Usage

Field-level schema

import { toFieldValidator } from '@vee-validate/zod';
import * as zod from 'zod';

const fieldSchema = toFieldValidator(zod.string().nonempty(REQUIRED_MSG).min(8, MIN_MSG));

Then use it with <Field /> component or useField function:

<Field name="field" :rules="fieldSchema" />

const { value, errorMessage } = useField('field', fieldSchema);

Form-level schema

import { toFormValidator } from '@vee-validate/zod';
import * as zod from 'zod';

const schema = toFormValidator(
  zod
    .object({
      password: zod.string(),
      confirmation: zod.string(),
    })
    .refine(data => data.confirmation === data.password, {
      message: CONFIRM_MSG,
      path: ['confirmation'],
    })
);

Then use it with <Form /> component or useForm function:

<Form :validation-schema="schema">
  ...
</Form>

const { errors } = useForm({
  validationSchema: schema,
});

Limitations

Under the hood, this plugin converts zod schemas to yup schemas by wrapping them with a similar API, this means there are some limitations, if you encounter unexpected behaviors or type issues please report them.

At the moment there are no known limitations.

Documentation

You can find more information over at vee-validate documentation here.

For how to use zod, check their repository.

License

MIT