VeeValidate

Form 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

📚 Getting Started ⏰ 10 Minute Tutorial 🧪 Examples

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" :rules="isRequired" />

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

For more information continue reading the Guide.