logaretm/vee-validate

Painless Vue forms - a cool form validation library that I used in the past for vue. I've been looking at form solutions in Vue since Dan has been talking about making this family board app.

Summary

vee-validate is a form validation library for Vue.js written in TypeScript. It provides two integration styles—a Composition API and higher-order components—to handle form state, validation, and submission. The library is UI-agnostic, ships 25+ built-in rules with 45+ locales, and supports Vue 2.x or Vue 3.x depending on the installed version.

What it is useful for

vee-validate is useful when building Vue.js applications that need form input validation without writing repetitive validation logic by hand. It covers common cases such as required fields, format checks, and locale-aware error messages through its built-in rules, while leaving styling and layout concerns to the engineer. It can be applied to single-field inputs, multi-step forms, or async server-side checks, and it pairs with schema libraries like Yup or Zod when validation logic grows more complex.

How engineers can use it

Engineers can install the package with yarn add vee-validate or npm install vee-validate --save. The README documents two main patterns.

For the Composition API, call useForm with a validationSchema, then use defineField to create a v-model binding and props for each input, and handleSubmit to wire the form's submit event:

const { defineField, handleSubmit, errors } = useForm({
  validationSchema: { field: required },
});
const [field, fieldProps] = defineField('field');
const onSubmit = handleSubmit(values => console.log(values));

The template uses v-model="field", v-bind="fieldProps", and renders errors.field next to the input.

For the declarative approach, import the Field and Form components, pass :rules to each Field, and read errors from the Form slot:

<Form v-slot="{ errors }" @submit="onSubmit">
  <Field name="field" :rules="required" />
  <span>{{ errors.field }}</span>
  <button>Submit</button>
</Form>

A documented limitation to be aware of: vee-validate v4 and v5 only support Vue 3.x, while Vue 2.x apps need vee-validate v2 or v3. The README also notes that the Field component renders a text input by default, and the documentation site covers how to control the rendered element. For full API details, custom error messages, and async rules, the README points readers to the official documentation site.