\n\n## Guide\n\n[Zod](https://github.com/colinhacks/zod/) is an excellent library for value validation which mirrors static typing APIs.\n\nIn their own words it is a:\n\n> TypeScript-first schema validation with static type inference\n\nYou can use zod as a typed schema with the `@vee-validate/zod` package:\n\n```sh\n# npm\nnpm install @vee-validate/zod\n# yarn\nyarn add @vee-validate/zod\n# pnpm\npnpm add @vee-validate/zod\n```\n\nThe `@vee-valdiate/zod` package exposes a `toTypedSchema` function that accepts any zod schema. Which then you can pass along to `validationSchema` option on `useForm`.\n\nThis makes the form values and submitted values typed automatically and caters for both input and output types of that schema.\n\n```ts\nimport { useForm } from 'vee-validate';\nimport { object, string } from 'zod';\nimport { toTypedSchema } from '@vee-validate/zod';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n email: string().min(1, 'required'),\n password: string().min(1, 'required'),\n name: string().optional(),\n })\n ),\n});\n\n// ❌ Type error, which means `values` is type-safe\nvalues.email.endsWith('@gmail.com');\n\nhandleSubmit(submitted => {\n // No errors, because email is required!\n submitted.email.endsWith('@gmail.com');\n\n // ❌ Type error, because `name` is not required so it could be undefined\n // Means that your fields are now type safe!\n submitted.name.length;\n});\n```\n\n### Zod default values\n\nYou can also define default values on your zod schema directly and it will be picked up by the form:\n\n```ts\nimport { useForm } from 'vee-validate';\nimport { object, string } from 'zod';\nimport { toTypedSchema } from '@vee-validate/zod';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n email: string().default('something@email.com'),\n password: string().default(''),\n })\n ),\n});\n```\n\nYour initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.\n\n### Zod preprocess\n\nYou can also define preprocessors to cast your fields before submission:\n\n```ts\nimport { useForm } from 'vee-validate';\nimport { object, number, preprocess } from 'zod';\nimport { toTypedSchema } from '@vee-validate/zod';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n age: preprocess(val => Number(val), number()),\n })\n ),\n});\n\n// typed as `unknown` since the source value can be anything\nvalues.age;\n\nhandleSubmit(submitted => {\n // will be typed as number because zod made sure it is!\n values.age;\n});\n```","users":{}}
![](\"https://github.com/logaretm/vee-validate/raw/main/logo.png\"){kind=logo}
\n \n\n \n ![](\"https://github.com/colinhacks/zod/raw/master/logo.svg\"){kind=logo}
\n \n
\n \n