Vuelidate

Vuelidate is a lightweight, model-based validation library for Vue.js that provides a declarative approach to form validation. It separates validation rules from the user interface and leverages Vue’s reactivity to keep validation state in sync with data. The library is designed to be lightweight and framework-friendly, with support spanning Vue 2 through the Vue 3 ecosystem.

Core concept and validators: Vuelidate uses a validation schema that attaches validators to each field. Validators are functions that receive the field value (and optional arguments) and return a boolean or a promise resolving to a boolean. Built-in validators cover common checks such as required, minLength, maxLength, minValue, maxValue, email, and sameAs, among others. The validation state is exposed as a reactive object, with per-field properties such as $dirty, $error, $invalid, $pending, and $params to describe status and rules applied.

Usage in Vue 2: In Vue 2 applications, validation rules are declared in a validations option on the component. Example: validations: { username: { required, minLength: minLength(3) }, email: { required, email } }. The component can read validation flags like $invalid or $error on the field (e.g., this.$v.username.$invalid) to drive UI messages. Calling a touch method marks fields as interacted to trigger error display.

Usage in Vue 3: For Vue 3, Vuelidate uses the Composition API. Import useVuelidate from @vuelidate/core and validators from @vuelidate/validators. Define a rules object and a reactive state, then create v$ = useVuelidate(rules, state). Validation results are accessed as v$.name.$invalid, v$.name.$dirty, and so on.

Development and ecosystem: Vuelidate emphasizes a minimal, composable API with easy extensibility. It supports both built-in and custom validators and integrates with standard Vue data flows, forming a common choice for form validation in Vue projects.