|
| 1 | +--- |
| 2 | +layout: ../../layouts/PageLayout.astro |
| 3 | +title: Migration Guide |
| 4 | +description: How to migrate from vee-validate v4 to v5 |
| 5 | +order: 10 |
| 6 | +--- |
| 7 | + |
| 8 | +# Migrating from v4 to v5 |
| 9 | + |
| 10 | +vee-validate v5 is a major release yet it does not introduce any breaking changes except when it comes to validation schemas. This is because vee-validate v5 now supports [standard schema](https://standardschema.dev/) libraries like zod, valibot, yup, and more. |
| 11 | + |
| 12 | +This means most of the companion packages like `@vee-validate/zod`, `@vee-validate/yup`, `@vee-validate/valibot` are no longer needed and are now deprecated. |
| 13 | + |
| 14 | +The only needed step is to remove all calls to `toTypedSchema` and replace them with the standard schema library of your choice. |
| 15 | + |
| 16 | +## Replace `toTypedSchema` schema calls |
| 17 | + |
| 18 | +### Zod |
| 19 | + |
| 20 | +vee-validate is compatible with zod 3.24.0 and above. |
| 21 | + |
| 22 | +```ts |
| 23 | +import { z } from 'zod'; |
| 24 | + |
| 25 | +// v4 |
| 26 | +const schema = toTypedSchema(z.object({ name: z.string().min(1) })); |
| 27 | + |
| 28 | +// v5 - remove the call to `toTypedSchema` |
| 29 | +const schema = z.object({ name: z.string().min(1) }); |
| 30 | + |
| 31 | +const { value, errorMessage } = useForm({ validationSchema: schema }); |
| 32 | +``` |
| 33 | + |
| 34 | +### Yup |
| 35 | + |
| 36 | +You will need to upgrade `yup` to 1.7.0 or above since the standard schema support was added in that version. |
| 37 | + |
| 38 | +#### If you are using `@vee-validate/yup` |
| 39 | + |
| 40 | +```ts |
| 41 | +import * as yup from 'yup'; |
| 42 | + |
| 43 | +// v4 |
| 44 | +const schema = toTypedSchema(yup.object({ name: yup.string().min(1) })); |
| 45 | + |
| 46 | +// v5 - remove the call to `toTypedSchema` |
| 47 | +const schema = yup.object({ name: yup.string().min(1) }); |
| 48 | + |
| 49 | +const { value, errorMessage } = useForm({ validationSchema: schema }); |
| 50 | +``` |
| 51 | + |
| 52 | +#### If you are using yup directly |
| 53 | + |
| 54 | +Continue using your yup schema as you've been doing in the past. You will start getting type safety features out of the box, just make sure you are using yup 1.7.0 or above. |
| 55 | + |
| 56 | +### Valibot |
| 57 | + |
| 58 | +vee-validate is compatible with valibot 1.0 and above. |
| 59 | + |
| 60 | +```ts |
| 61 | +import * as v from 'valibot'; |
| 62 | + |
| 63 | +// v4 |
| 64 | +const schema = toTypedSchema(v.object({ email: v.pipe(v.string(), v.email()) })); |
| 65 | + |
| 66 | +// v5 - remove the call to `toTypedSchema` |
| 67 | +const schema = v.object({ email: v.pipe(v.string(), v.email()) }); |
| 68 | + |
| 69 | +const { value, errorMessage } = useForm({ validationSchema: schema }); |
| 70 | +``` |
0 commit comments