Vue.js Form Validation example with VeeValidate


In this tutorial, we’re gonna make a Vuejs Form Validation example with VeeValidate.

Example Overview

Our form has 3 fields:
– Username: check existence
– Email: check existence, then check email format
– Password: check existence, then check if at least 6 characters



Add VeeValidate to Vue Project

– with npm
npm install vee-validate

– with yarn
yarn add vee-validate

package.json after installation:

Use VeeValidate


Form Validation Component

We use v-validate directive for input tag we want to validate (make sure that it has a name attribute -> for error messages).

We pass to v-validate directive a string which contains a list of validation rules (separated by a pipe ‘|’).

In the example above:
required to indicate that the field is required
email to indicate that the field must be an email.

To display the error message, we use the errors.first() method:

We also use errors.has() and submitted bool variable for v-if directive.


App Component


Source Code


By grokonez | November 5, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *