Version

This is the docs for vee-validate 3.x. You access the docs for the old version 2.x from here.

Quick Setup

VeeValidate is a form validation framework for Vue.js.

Installation

# install with npm
npm install vee-validate --save

# install with yarn
yarn add vee-validate

Usage

Register the ValidationProvider component and add the required rule:

import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'This field is required'
});

new Vue({
  el: '#app',
  components: {
    ValidationProvider
  },
  data: () => ({
    value: ''
  })
});

Wrap your inputs with the ValidationProvider:

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

And this is the result: