logaretm/vee-validate

★ 11,256TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((repo))
    Approaches
      Composition API
      Declarative components
    Features
      25 built-in rules
      Async validation
      45 language translations
    Integrations
      Yup schemas
      Zod schemas
      Any UI library
    Audience
      Vue developers
      Frontend teams

mindmap root((repo)) Approaches Composition API Declarative components Features 25 built-in rules Async validation 45 language translations Integrations Yup schemas Zod schemas Any UI library Audience Vue developers Frontend teams

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add email, password, and required-field validation to a Vue 3 login form without writing custom validation logic from scratch

USE CASE 2

Build a multi-step form with field-level and form-level error messages using composition API functions like useForm and defineField

USE CASE 3

Define all validation rules in a Zod or Yup schema and connect them automatically to Vue form fields

USE CASE 4

Display localized validation error messages in over 45 languages for a multilingual web application

Tech stack

TypeScriptVue.jsJavaScriptYupZod

Getting it running

Difficulty · easy Time to first run · 30min

Requires an existing Vue 3 project, Yup or Zod integration is optional but recommended for schema-based validation.

Use freely for any purpose, including commercial projects, as long as you keep the copyright notice.

In plain English

vee-validate is a TypeScript library for Vue.js that helps developers add form validation to their web applications without needing to write a lot of boilerplate code. When a user fills out a form on a website, validation checks whether the input is correct before it gets submitted. This library handles those checks in a structured way. vee-validate supports two main approaches for adding validation to forms. The first uses Vue's composition API, where you call functions like useForm and defineField in your component's script to set up the form logic. The second uses declarative components, where you wrap your form fields in special Form and Field tags that handle validation for you. Both approaches provide error messages and submission handling out of the box. Validation rules can be synchronous or asynchronous, and they can be applied at the level of individual fields or the entire form at once. The library ships with more than 25 built-in rules covering common needs like required fields and minimum lengths. It also includes translations for over 45 languages, contributed by developers from around the world. vee-validate works with plain HTML inputs as well as with UI component libraries. It focuses only on the form validation logic, leaving styling and layout entirely up to you. If you prefer defining rules in a structured schema format, the library integrates with Yup and Zod. The library supports Vue 3 in versions 4.x and 5.x, with older versions available for Vue 2. It is released under the MIT license.

Copy-paste prompts

Prompt 1

How do I use vee-validate's useForm and defineField in Vue 3 to validate a registration form with required email and minimum-length password fields?

Prompt 2

I want to validate my Vue 3 form using a Zod schema with vee-validate, how do I connect the schema to my Form and Field components?

Prompt 3

How do I display validation errors in French using vee-validate's built-in locale files?

Prompt 4

I need async validation in vee-validate to check if a username is already taken, how do I define an asynchronous validation rule?

Open on GitHub → Explain another repo

← logaretm on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.