Documentation is still a work in progress ๐Ÿšง

VeeValidate

Template Based Validation for Vue.js

๐Ÿž Easy

Declarative validation that is familiar and easy to setup

๐Ÿง˜โ€โ™€๏ธ Flexible

Synchronous, Asynchronous, field-level or form-level validation

โšก๏ธ Fast

Build faster forms faster with intuitive API and small footprint

๐Ÿ Minimal

Only handles the complicated and painful form concerns, gives you full control over everything else

๐Ÿค Tiny

Small footprint < 5kb which makes your apps faster to load

๐Ÿ˜Ž UI Agnostic

Works with native HTML elements or your favorite UI library components

๐Ÿฆพ Progressive

Works with any setup whether you use Vue.js as a progressive enhancement or in a complex setup

โœ… Built-in Rules

Companion lib with 25+ Rules that covers most needs in most web applications

๐ŸŒ i18n

45+ locales for built-in rules contributed by developers from all over the world

Quick Setup

Installation

# install with yarn
yarn add vee-validate@next

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

Or use a CDN

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

Usage

Register the Field and Form components and create a simple required validator:

import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    // Validator function
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

Then use the Form and Field components to render your form:

<Form v-slot="{ errors }">
  <Field name="field" as="input" :rules="isRequired" />

  <span>{{ errors.field }}</span>
</Form>

For more information continue reading the Guide.