vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions
Features
- š 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 form concerns, gives you full control over everything else
- š UI Agnostic: Works with native HTML elements or your favorite UI library components
- 𦾠Progressive: Works 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
Installation
# Install with yarn yarn add vee-validate@next # Install with npm npm install vee-validate@next --save
Vue version support
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
Usage
vee-validate offers two styles to integrate form validation into your Vue.js apps
Declarative Components
Higher-order components are better suited for most of your cases. Register the Field and Form components and create a simple required validator:
import { Field, Form } from 'vee-validate'; export default { components: { Field, Form, }, methods: { 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>
TheĀ Field
Ā component renders anĀ input
Ā of typeĀ text
Ā by default but you canĀ control that
Composition API
If you want more fine grained control, you can use useField function to compose validation logic into your component:
import { useField } from 'vee-validate'; export default { setup() { // Validator function const isRequired = value => (value ? true : 'This field is required'); const { value, errorMessage } = useField('field', isRequired); return { value, errorMessage, }; }, };
Then in your template, use v-model to bind the value to your input and display the errors using errorMessage:
<input name="field" v-model="value" /> <span>{{ errorMessage }}</span>