VeeValidate is a wondeful form validation framework for Vue.js. In this article, we’re going to see how VeeValidate works. Let’s get started:

Table of Contents

1. Install VeeValidate
2. Usage
3. Examples

Install VeeValidate

For Vue CLI app, run this command to install this package:

# npm
npm install vee-validate --save
# yarn
yarn add vee-validate

If you’re not using CLI, you’re able to use CDN:

<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@latest"></script>

Usage

Here’s a basic usage:

<template>
    <div class="column is-12">
        <label class="label" for="email">Email</label>
        <p :class="{ 'control': true }">
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
</template>

<script>
export default {
  name: 'basic-example'
};
</script>

Examples

Let’s take a look at some awesome demos:

That’s it. Thanks for reading.