\n\n## Getting started\n\nYou can use [yup](https://github.com/jquense/yup) as a typed schema with the `@vee-validate/yup` package:\n\n```sh\n# npm\nnpm install @vee-validate/yup\n# yarn\nyarn add @vee-validate/yup\n# pnpm\npnpm add @vee-validate/yup\n```\n\nThe `@vee-valdiate/yup` package exposes a `toTypedSchema` function that accepts any yup 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 'yup';\nimport { toTypedSchema } from '@vee-validate/yup';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n email: string().required(),\n password: string().required(),\n name: string(),\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### Yup default values\n\nYou can also define default values on your schema directly and it will be picked up by the form:\n\n```ts\nimport { useForm } from 'vee-validate';\nimport { object, string } from 'yup';\nimport { toTypedSchema } from '@vee-validate/yup';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n email: string().required().default('something@email.com'),\n password: string().required().default(''),\n name: 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### Yup transforms\n\nYou can also define transforms to cast your fields before submission:\n\n```ts\nimport { useForm } from 'vee-validate';\nimport { object, number } from 'yup';\nimport { toTypedSchema } from '@vee-validate/yup';\n\nconst { values, handleSubmit } = useForm({\n validationSchema: toTypedSchema(\n object({\n age: number()\n .transform(val => Number(val))\n .required(),\n })\n ),\n});\n```\n\nBut 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.\n","readmeFilename":"README.md"}
![](\"https://github.com/logaretm/vee-validate/raw/main/logo.png\"){kind=logo}
\n \n\n
\n \n