Awesome Open Source
Awesome Open Source

codecov circleci 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:

<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

MIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,392) 
hacktoberfest (4,219) 
vue (4,036) 
vuejs (1,066) 
vuejs2 (371) 
validation (311) 
vue2 (264) 
validator (98) 
validation-library (23) 
validate (21) 
validations (17) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210