Need help with vuelidate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

6.1K Stars 448 Forks MIT License 581 Commits 109 Opened issues


Simple, lightweight model-based validation for Vue.js

Services available


Need anything else?

Contributors list


Simple, lightweight model-based validation for Vue.js 2.x & 3.0

Visit Vuelidate Docs for detailed instructions.





Vue Mastery logo


You can use Vuelidate just by itself, but we suggest you use it along

, as it gives a nice collection of commonly used validators.

Vuelidate supports both Vue 3.0 and Vue 2.x

npm install @vuelidate/core @vuelidate/validators
# or
yarn add @vuelidate/core @vuelidate/validators

Usage with Options API

To use Vuelidate with the Options API, you just need to return an empty Vuelidate instance from


Your validation state lives in the

and the rules are in
import { email, required } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'

export default { name: 'UsersPage', data: () => ({ form: { name: '', email: '' } }), setup: () => ({ v$: useVuelidate() }), validations () { return { form: { name: { required }, email: { required, email } } } } }

Usage with Composition API

To use Vuelidate with the Composition API, you need to provide it a state and set of validation rules, for that state.

The state can be a

object or a collection of
import { reactive } from 'vue' // or '@vue/composition-api' in Vue 2.x
import { useVuelidate } from '@vuelidate/core'
import { email, required } from '@vuelidate/validators'

export default { setup () { const state = reactive({ name: '', emailAddress: '' }) const rules = { name: { required }, emailAddress: { required, email } }

const v$ = useVuelidate(rules, state)

return { state, v$ }

} }

Providing global config to your Vuelidate instance

You can provide global configs to your Vuelidate instance using the third parameter of

or by using the
. These config options are used to change some core Vuelidate functionality, like
and more. Learn all about them in Validation Configuration.

Config with Options API

Config with Composition API

import { reactive } from 'vue' // or '@vue/composition-api' in Vue 2.x
import { useVuelidate } from '@vuelidate/core'
import { email, required } from '@vuelidate/validators'

export default { setup () { const state = reactive({}) const rules = {} const v$ = useVuelidate(rules, state, { $lazy: true })

return { state, v$ }

} }

The validation object, aka

interface ValidationState {
  $dirty: false, // validations will only run when $dirty is true
  $touch: Function, // call to turn the $dirty state to true
  $reset: Function, // call to turn the $dirty state to false
  $errors: [], // contains all the current errors { $message, $params, $pending, $invalid }
  $error: false, // true if validations have not passed
  $invalid: false, // as above for compatibility reasons
  // there are some other properties here, read the docs for more info

Validations rules are on by default

Validation 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

is called or by using

If 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 Vuelidate. This saves extra invocations for async validators as well as makes the initial validation setup a bit more performant.
const v = useVuelidate(rules, state, { $lazy: true })

Resetting dirty state

If you wish to reset a form's

state, you can do so by using the appropriately named
method. For example when closing a create/edit modal, you dont want the validation state to persist.

Displaying error messages

The validation state holds useful data, like the invalid state of each property validator, along with extra properties, like an error message or extra parameters.

Error messages come out of the box with the bundled validators in

package. You can check how change those them over at the Custom Validators page

The easiest way to display errors is to use the form's top level

property. It is an array of validation objects, that you can iterate over.

{{ error.$validator }} on property {{ error.$property }} says: {{ error.$message }}

You can also check for errors on each form property:

For more info, visit the Vuelidate Docs.


To test the package run

# install dependencies
yarn install

create bundles.

yarn build

Create docs inside /docs package

yarn dev

run unit tests for entire monorepo

yarn test:unit

You can also run for same command per package




Here we honor past contributors who have been a major part on this project.



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.