Getting started

Vuelidate Logotype

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.

TIP

Vuelidate v2.0 supports both Vue 3.0 and Vue 2.x**

Installation

Installing Vuelidate is straightforward, and can be done with your package manager of choice.

npm install @vuelidate/core @vuelidate/validators

// OR

yarn add @vuelidate/core @vuelidate/validators

Getting Started

TIP

When used with Vue 2.x, you need to install the @vue/composition-api plugin. You can learn how to do that here. Once this is done, you can proceed with the below.

import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup () {
    return { v$: useVuelidate() }
  },
  data () {
    return {
      firstName: '',
      lastName: '',
      contact: {
        email: ''
      }
    }
  },
  validations () {
    return {
      firstName: { required }, // Matches this.firstName
      lastName: { required }, // Matches this.lastName
      contact: {
        email: { required, email } // Matches this.contact.email
      }
    }
  }
}

Lets explain what happens here. We declare our local state with data, then we declare our validation rules with validations. Lastly, we activate Vuelidate inside setup by calling useVuelidate. Internally it will take the validations returned object and treat it as the validation rules. It will also take the whole component instance local state (including data, but also computed).

Notice how the the objects returned from data and validations have a matching structure.









 
 
 
 
 
 
 


 
 
 
 
 
 
 



import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup () {
    return { v$: useVuelidate() }
  },
  data () {
    return {
      firstName: '',
      lastName: '',
      contact: {
        email: ''
      }
    }
  },
  validations () {
    return {
      firstName: { required }, // Matches this.firstName
      lastName: { required }, // Matches this.lastName
      contact: {
        email: { required, email } // Matches this.contact.email
      }
    }
  }
}

Alternative syntax (Composition API)

Vuelidate v2.x also comes with support for Composition API. The above example can be translated into the composition API syntax.

import { reactive } from 'vue' // "from '@vue/composition-api'" if you are using Vue 2.x
import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup () {
    const state = reactive({
      firstName: '',
      lastName: '',
      contact: {
        email: ''
      }
    })
    const rules = {
      firstName: { required }, // Matches state.firstName
      lastName: { required }, // Matches state.lastName
      contact: {
        email: { required, email } // Matches state.contact.email
      }
    }

    const v$ = useVuelidate(rules, state)

    return { name, v$ }
  }
}

Now that validations are set up, we can check inside our template for errors by looking at the name property inside of the v$ Vuelidate object. It will hold all the information and state of our name state's validation.

If any error is present, the $errors array property inside of $v.name will contain an object that describes each error for us to loop through.

Each object inside the $errors array will contain a few properties that allows us to dynamically build our error message.

An example of our name property being in an error state due to it being required would be:

{
  "$property": "name",
  "$validator": "required",
  "$message": "The value is required",
  [...]
}

Now that we understand the basic content of the error objects, we can build our error messages in the template. This approach will dynamically cover any number of validators that were applied to our input.

<div :class="{ error: v$.name.$errors.length }">
  <input v-model="name">
  <div class="input-errors" v-for="error of v$.name.$errors" :key="error.$uid">
    <div class="error-msg">{{ error.$message }}</div>
  </div>
</div>

That's it! Our validations are set and ready.

Head over to the Guide page now for a more detailed guide on how to use Vuelidate.

Sponsors

Gold

Vue.js Amsterdam

Silver

Storyblok

Bronze

Vue Mastery logo