Vuelidate 2 is a simple, but powerful, lightweight model-based validation for Vue.js 3 and 2. Vuelidate is considered model-based because the validation rules are defined next to your data, and the validation tree structure matches the data model structure.

Installation

You can use Vuelidate just by itself, but we suggest you use it along with @vuelidate/validators, as it gives a nice collection of commonly used validators.

Vuelidate supports both Vue 3.0 and Vue 2.x

You can install Vuelidate with Npm or Yarn:

npm install @vuelidate/core @vuelidate/validators

//or

yarn add @vuelidate/core @vuelidate/validators

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 reactive object or a collection of refs.

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$ }
  }
}

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$ }
  }
}

Validations rules are on by default

Validation in Vuelidate 2 is by default on, meaning validators are called on initialization, but an error is considered active, only after a field is dirty, so after
$touch() is called or by using the $model .

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 set up a bit more performant.

const v = useVuelidate(rules, state, { $lazy: true })

Resetting dirty state

If 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 don’t want the validation state to persist.

<app-modal @closed="v$.$reset()">
<!-- some inputs  -->
</app-modal>

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 @vuelidate/validators 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 $errors property. It is an array of validation objects, that you can iterate over.

<p
  v-for="(error, index) of $v.$errors"
  :key="index"
>
<strong>{{ error.$validator }}</strong>
<small> on property</small>
<strong>{{ error.$property }}</strong>
<small> says:</small>
<strong>{{ error.$message }}</strong>
</p>
You can also check for errors on each form property:

<p
  v-for="(error, index) of $v.name.$errors"
  :key="index"
>
<!-- Same as above -->
</p>

For more information, you can visit the Vuelidate Docs.