vv
4.8/515
vee-validate
npm i vee-validate
vv

vee-validate

✅ Painless Vue forms

by Abdelrahman Awad

4.6.9 (see all)License:MITTypeScript:Built-InCategories:Vue Validation
npm i vee-validate
Readme

Painless Vue forms



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

# Install with npm
npm install vee-validate --save

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

vue Versionvee-validate versionDocumentation Link
2.x2.x or 3.xv2 or v3
3.x4.xv4

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>

📚 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

Released under MIT by @logaretm.

4.8/ 5
15
Rate
5
12
4
3
3
0
2
0
1
0
Great Documentation6
Easy to Use3
Highly Customizable3
Performant2
Responsive Maintainers2

Downloads/wk

390K

GitHub Stars

9.3K

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

324

OPEN ISSUES

31

OPEN PRs

4
VersionTagPublished
4.6.9
latest
6d ago
4.5.8
next
8mos ago
4.5.0-alpha.6
edge
1yr ago
4.5.0-alpha.2
next-edge
1yr ago

Rate & Review

100