Simple, lightweight model-based validation for Vue.js

Clone this repo:
  1. fb3b46b Carrene/beaver#19 by Vahid · 6 years ago master
  2. fbcfd99 update readme by Frizi · 6 years ago
  3. 17c9f41 0.2.0 by Frizi · 6 years ago
  4. abc88e9 add gzip size badge by Frizi · 6 years ago
  5. bbccc6b add browser bundle to the repository by Frizi · 6 years ago


codecov gzip size

Simple, lightweight model-based validation for Vue.js

Current version: 0.2.0

Features & characteristics:

  • Model based
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified valdiators
  • 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


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],
  validation: { ... }

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

<script src="vuelidate/dist/vuelidate.min.js"></script>

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: {
      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 bundle

# 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.



Copyright (c) 2016 Paweł Grabarz & Damian Dulisz