\n\n## Installation\n\nYou can use Vuelidate just by itself, but we suggest you use it along `@vuelidate/validators`, as it gives a nice collection of commonly used validators.\n\n**Vuelidate supports both Vue 3.0 and Vue 2.x**\n\n```bash\nnpm install @vuelidate/core @vuelidate/validators\n# or\nyarn add @vuelidate/core @vuelidate/validators\n```\n\n## Install via plugin in Vue 3.0\n\n> This is only required if you want to use the `validations` option. `setup` usage documented later.\n\n```js\n// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { VuelidatePlugin } from '@vuelidate/core'\n\nconst app = createApp(App)\napp.use(VuelidatePlugin)\napp.mount('#app')\n```\n\n## Install via plugin in Vue 2.x\n\n> This is only required if you want to use the `validations` option. `setup` usage documented later.\n\n```js\n// main.js\n\nimport Vue from 'vue'\nimport VueCompositionApi from '@vue/composition-api'\nimport { VuelidatePlugin } from '@vuelidate/core'\n\nVue.use(VueCompositionApi)\nVue.use(VuelidatePlugin)\n\n```\n\nThen you can use it in all components with the Options API\n\n```js\nimport { email, required } from '@vuelidate/validators'\n\nexport default {\n name: 'UsersPage',\n data: () => ({\n form: {\n name: '',\n email: ''\n }\n }),\n validations: {\n form: {\n name: { required },\n email: { required, email }\n }\n }\n}\n```\n\n## Usage in `setup` function\n\n```js\nimport { ref } from 'vue' // or '@vue/composition-api' in Vue 2.x\nimport { useVuelidate } from '@vuelidate/core'\nimport { email, required } from '@vuelidate/validators'\n\nexport default {\n setup () {\n const name = ref('')\n const emailAddress = ref('')\n const rules = {\n name: { required },\n emailAddress: { required, email }\n }\n\n const $v = useVuelidate(rules, { name, emailAddress })\n\n return { name, emailAddress, $v }\n }\n}\n```\n\n## The `$v` object\n\n```js\n{\n $dirty: false, // validations will only run when $dirty is true\n $touch: , // call to turn the $dirty state to true\n $reset: , // call to turn the $dirty state to false\n $errors: [], // contains all the current errors { $message, $params, $pending, $invalid }\n $error: false, // true if validations have not passed\n $invalid: false, // as above for compatibility reasons\n // there are some other properties here, read the docs\n}\n```\n\n## Lazy validations by default\n\nValidation in Vuelidate 2 is by default `lazy`, meaning validators are only called, after a field is dirty, so after `$touch()` is called or by using `$model`.\n\nThis saves extra invocations for async validators as well as makes the initial validation setup a bit more performant.\n\n### Resetting dirty state\n\nIf you wish to reset a form's `$dirty` state, you can do so by using the appropriately named `$reset` method. For example when closing a create/edit modal, you dont want the validation state to persist.\n\n```vue\n\n \n\n```\n\n## Displaying error messages\n\nThe validation state holds useful data, like the invalid state of each property validator, along with extra properties, like an error message or extra parameters.\n\nError messages come out of the box with the bundled validators in `@vuelidate/validators` package. You can check how change those them over at the [Custom Validators page](./custom_validators.md)\n\nThe easiest way to display errors is to use the form's top level `$errors` property. It is an array of validation objects, that you can iterate over.\n\n```vue\n\n {{ error.$validator }}\n on property\n {{ error.$property }}\n says:\n {{ error.$message }}\n\n```\n\nYou can also check for errors on each form property:\n\n```vue\n\n \n\n```\n\nFor more info, visit the [Vuelidate Docs](https://vuelidate-next.netlify.org).\n\n## Development\nTo test the package run\n\n```bash\nyarn test:unit\n```\n\nTo link the package run\n\n```bash\nyarn link\n```\n\nTo build run the package, run:\n\n```bash\nnpm run build\n```\n","readmeFilename":"README.md"}
![\"Storyblok\"](\"https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png\")
\n \n![\"Vue](\"https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png\")
\n \n