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
# install with yarn
yarn add [email protected]
# install with npm
npm install [email protected] --save
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
vue Version | vee-validate version | Documentation Link |
---|---|---|
2.x |
2.x or 3.x
|
v2 or v3 |
3.x |
4.x |
v4 |
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
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>
Read the documentation and demos.
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide
Here we honor past contributors and sponsors who have been a major part on this project.
MIT