
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
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.