Need help with vee-validate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Global Rank
#16,272
Topics of expertise
Vue.js
guide
docs
vuejs
Location
New Cairo, Egypt
8.1K Stars 975 Forks MIT License 3.8K Commits 10 Opened issues

Description

✅ Template-driven Form Validation for Vue.js

Services available

!
?

Need anything else?

Contributors list

Financial Contributors on Open Collective codecov Build Status CDNJS npm npm Bundle Size Average time to resolve an issue Percentage of issues still open


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

Installation

# install with yarn
yarn add [email protected]

install with npm

npm install [email protected] --save

Vue version support

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 |

Usage

Declarative Components (Recommended)

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:

  

{{ errors.field }}

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
:
{{ errorMessage }}

📚 Documentation

Read the documentation and demos.

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide

Credits

Emeriti

Here we honor past contributors and sponsors who have been a major part on this project.

⚖️ License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.