[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10067":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":15,"starSnapshotCount":15,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},10067,"vuelidate","vuelidate\u002Fvuelidate","Simple, lightweight model-based validation for Vue.js","https:\u002F\u002Fvuelidate-next.netlify.app\u002F",null,"JavaScript",6890,485,76,199,0,5,39.06,"MIT License",false,"next",true,[23,24,25,26,5],"javascript","validation","vue","vuejs","2026-06-12 02:02:16","# vuelidate\n\n> Simple, lightweight model-based validation for Vue.js 2.x & 3.0\n\nVisit [Vuelidate Docs](https:\u002F\u002Fvuelidate-next.netlify.app) for detailed instructions.\n\n## Sponsors\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgetform.io\u002F\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fcdn.discordapp.com\u002Fattachments\u002F1002927810710605875\u002F1034915542596845728\u002Fgetform.png\" alt=\"Get Form\" width=\"240px\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.storyblok.com\u002Fdevelopers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F51376\u002F3856x824\u002Ffea44d52a9\u002Fcolored-full.png\" alt=\"Storyblok\" width=\"240px\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.vuemastery.com\u002F\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fcdn.discordapp.com\u002Fattachments\u002F258614093362102272\u002F557267759130607630\u002FVue-Mastery-Big.png\" alt=\"Vue Mastery logo\" width=\"180px\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Installation\n\nYou can use Vuelidate just by itself, but we suggest you use it along `@vuelidate\u002Fvalidators`, as it gives a nice collection of commonly used\nvalidators.\n\n**Vuelidate supports both Vue 3.0 and Vue 2.x**\n\n```bash\nnpm install @vuelidate\u002Fcore @vuelidate\u002Fvalidators\n# or\nyarn add @vuelidate\u002Fcore @vuelidate\u002Fvalidators\n```\n\n## Possible alternatives\n\nVuelidate is currently in LTS mode, so you may want to look at similar form libraries that are currently actively maintained.\n\n### Model-based validation\n\n- **Regle**: ✅ Headless form validation library for Vue.js [[Github](https:\u002F\u002Fgithub.com\u002Fvictorgarciaesgi\u002Fregle), [Docs](https:\u002F\u002Freglejs.dev\u002F), [Migration guide](https:\u002F\u002Freglejs.dev\u002Fintroduction\u002Fmigrate-from-vuelidate)]\n  - A validation library that use a similar API as Vuelidate's, with improved Typescript support, Nuxt integration and schema libraries (Zod, Valibot, Arktype)\n\n### Composable approach\n\n- **Vee-Validate**: Painless Vue forms [[Github](https:\u002F\u002Fgithub.com\u002Flogaretm\u002Fvee-validate\u002F), [Docs](https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002F)]\n\n### UI based\n\n- **VueForm**: Open-Source Form Framework for Vue [[Github](https:\u002F\u002Fgithub.com\u002Fvueform\u002Fvueform), [Docs](https:\u002F\u002Fvueform.com\u002F)]\n\n## Usage with Options API\n\nTo use Vuelidate with the Options API, you just need to return an empty Vuelidate instance from `setup`.\n\nYour validation state lives in the `data` and the rules are in `validations` function.\n\n```js\nimport { email, required } from '@vuelidate\u002Fvalidators'\nimport { useVuelidate } from '@vuelidate\u002Fcore'\n\nexport default {\n  name: 'UsersPage',\n  data: () => ({\n    form: {\n      name: '',\n      email: ''\n    }\n  }),\n  setup: () => ({ v$: useVuelidate() }),\n  validations () {\n    return {\n      form: {\n        name: { required },\n        email: { required, email }\n      }\n    }\n  }\n}\n```\n\n## Usage with Composition API\n\nTo use Vuelidate with the Composition API, you need to provide it a state and set of validation rules, for that state.\n\nThe state can be a `reactive` object or a collection of `refs`.\n\n```js\nimport { reactive } from 'vue' \u002F\u002F or '@vue\u002Fcomposition-api' in Vue 2.x\nimport { useVuelidate } from '@vuelidate\u002Fcore'\nimport { email, required } from '@vuelidate\u002Fvalidators'\n\nexport default {\n  setup () {\n    const state = reactive({\n      name: '',\n      emailAddress: ''\n    })\n    const rules = {\n      name: { required },\n      emailAddress: { required, email }\n    }\n\n    const v$ = useVuelidate(rules, state)\n\n    return { state, v$ }\n  }\n}\n```\n\n## Providing global config to your Vuelidate instance\n\nYou can provide global configs to your Vuelidate instance using the third parameter of `useVuelidate` or by using the `validationsConfig`. These\nconfig options are used to change some core Vuelidate functionality, like `$autoDirty`, `$lazy`, `$scope` and more. Learn all about them\nin [Validation Configuration](https:\u002F\u002Fvuelidate-next.netlify.app\u002Fapi.html#validation-configuration).\n\n### Config with Options API\n\n```vue\n\u003Cscript>\nimport { useVuelidate } from '@vuelidate\u002Fcore'\n\nexport default {\n  data () {\n    return { ...state }\n  },\n  validations () {\n    return { ...validations }\n  },\n  setup: () => ({ v$: useVuelidate() }),\n  validationConfig: {\n    $lazy: true,\n  }\n}\n\u003C\u002Fscript>\n```\n\n### Config with Composition API\n\n```js\nimport { reactive } from 'vue' \u002F\u002F or '@vue\u002Fcomposition-api' in Vue 2.x\nimport { useVuelidate } from '@vuelidate\u002Fcore'\nimport { email, required } from '@vuelidate\u002Fvalidators'\n\nexport default {\n  setup () {\n    const state = reactive({})\n    const rules = {}\n    const v$ = useVuelidate(rules, state, { $lazy: true })\n\n    return { state, v$ }\n  }\n}\n```\n\n## The validation object, aka `v$` object\n\n```ts\ninterface ValidationState {\n  $dirty: false, \u002F\u002F validations will only run when $dirty is true\n  $touch: Function, \u002F\u002F call to turn the $dirty state to true\n  $reset: Function, \u002F\u002F call to turn the $dirty state to false\n  $errors: [], \u002F\u002F contains all the current errors { $message, $params, $pending, $invalid }\n  $error: false, \u002F\u002F true if validations have not passed\n  $invalid: false, \u002F\u002F as above for compatibility reasons\n  \u002F\u002F there are some other properties here, read the docs for more info\n}\n```\n\n## Validations rules are on by default\n\nValidation in Vuelidate 2 is by default on, meaning validators are called on initialisation, but an error is considered active, only after a field is dirty, so after `$touch()` is called or by using `$model`.\n\nIf you wish to make a validation lazy, meaning it only runs validations once it a field is dirty, you can pass a `{ $lazy: true }` property to\nVuelidate. This saves extra invocations for async validators as well as makes the initial validation setup a bit more performant.\n\n```js\nconst v = useVuelidate(rules, state, { $lazy: true })\n```\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\u002Fedit\nmodal, you dont want the validation state to persist.\n\n```vue\n\n\u003Capp-modal @closed=\"v$.$reset()\">\n\u003C!-- some inputs  -->\n\u003C\u002Fapp-modal>\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\nparameters.\n\nError messages come out of the box with the bundled validators in `@vuelidate\u002Fvalidators` package. You can check how change those them over at\nthe [Custom Validators page](https:\u002F\u002Fvuelidate-next.netlify.app\u002Fcustom_validators.html)\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\u003Cp\n  v-for=\"(error, index) of v$.$errors\"\n  :key=\"index\"\n>\n\u003Cstrong>{{ error.$validator }}\u003C\u002Fstrong>\n\u003Csmall> on property\u003C\u002Fsmall>\n\u003Cstrong>{{ error.$property }}\u003C\u002Fstrong>\n\u003Csmall> says:\u003C\u002Fsmall>\n\u003Cstrong>{{ error.$message }}\u003C\u002Fstrong>\n\u003C\u002Fp>\n```\n\nYou can also check for errors on each form property:\n\n```vue\n\u003Cp\n  v-for=\"(error, index) of v$.name.$errors\"\n  :key=\"index\"\n>\n\u003C!-- Same as above -->\n\u003C\u002Fp>\n```\n\nFor more info, visit the [Vuelidate Docs](https:\u002F\u002Fvuelidate-next.netlify.app).\n\n## Development\n\nTo test the package run\n\n``` bash\n# install dependencies\nyarn install\n\n# create bundles.\nyarn build\n\n# Create docs inside \u002Fdocs package\nyarn dev\n\n# run unit tests for entire monorepo\nyarn test:unit\n\n# You can also run for same command per package\n```\n\n## Contributors\n\n### Current\n\n- [Damian Dulisz](https:\u002F\u002Fgithub.com\u002Fshentao)\n- [Natalia Tepluhina](https:\u002F\u002Fgithub.com\u002FNataliaTepluhina)\n- [Dobromir Hristov](https:\u002F\u002Fgithub.com\u002Fdobromir-hristov)\n\n### Emeriti\n\nHere we honor past contributors who have been a major part on this project.\n\n- [Monterail](https:\u002F\u002Fgithub.com\u002Fmonterail)\n- [Paweł Grabarz](https:\u002F\u002Fgithub.com\u002FFrizi)\n\n## License\n\n[MIT](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n","vuelidate 是一个为 Vue.js 应用程序提供简单轻量级基于模型验证的库。它支持 Vue 2.x 和 Vue 3.0 版本，通过使用 `@vuelidate\u002Fcore` 和 `@vuelidate\u002Fvalidators` 可以轻松集成到项目中，提供了丰富的内置验证器来满足常见的表单验证需求。vuelidate 的设计使得开发者可以方便地在选项式 API 或组合式 API 中定义和管理验证规则，从而保持代码的清晰与可维护性。适用于需要进行客户端表单数据验证的各种场景，特别是当项目已采用或计划采用 Vue 框架时。",2,"2026-06-11 03:26:21","top_topic"]