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

5.8K Stars 422 Forks MIT License 314 Commits 117 Opened issues


Simple, lightweight model-based validation for Vue.js

Services available


Need anything else?

Contributors list


codecov gzip size

Simple, lightweight model-based validation for Vue.js



Vuejs Amsterdam

Vue - The Road To Enterprise




Vue Mastery logo Vue Mastery logo

Features & characteristics:

  • Model based
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified validators
  • Easy to use with custom validators (e.g. Moment.js)
  • Support for function composition
  • Validates different data sources: Vuex getters, computed values, etc.

Demo & docs

Vue 3 support

Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.


npm install vuelidate --save

You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.

import Vue from 'vue'
import Vuelidate from 'vuelidate'

Alternatively it is possible to import a mixin directly to components in which it will be used.

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({ mixins: [validationMixin], validations: { ... } })

The browser-ready bundle is also provided in the package.


Basic usage

For each value you want to validate, you have to create a key inside validations options. You can specify when input becomes dirty by using appropriate event on your input box.

import { required, minLength, between } from 'vuelidate/lib/validators'

export default { data () { return { name: '', age: 0 } }, validations: { name: { required, minLength: minLength(4) }, age: { between: between(20, 30) } } }

This will result in a validation object:

$v: {
  name: {
    "required": false,
    "minLength": false,
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  age: {
    "between": false
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false

Checkout the docs for more examples:


# install dependencies
npm install

serve with hot reload at localhost:8080

npm run dev

create UMD bundle.

npm run build

Create docs inside /gh-pages ready to be published

npm run docs

run unit tests

npm run unit

run all tests

npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.



Damian Dulisz
Damian Dulisz
Natalia Tepluhina
Natalia Tepluhina
Natalia Tepluhina
Dobromir Hristov
Marina Mosti
Marina Mosti


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.