How to Use VeeValidate Form Validation in Vue.js

Last modified on July 10, 2020 42 sec read

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/[email protected]/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/[email protected]"></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. 🙂

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

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