Guide · Open source

How to use vee-validate: install, validate forms and submit in Vue

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

vee-validate is a free, MIT-licensed JavaScript library for Vue.js that handles form validation, such as checking required fields and showing error messages. This guide is for Vue developers who want validation without writing it from scratch. By the end you will know how to install it, build a form with its composition API or declarative components, and submit validated values.

VeeValidatelogaretm/vee-validate · ★ 11.3k · MIT Install options & downloads

Quick start

1Confirm your setup. Make sure you have a Vue.js 3.x project with Node.js and npm or yarn available.
2Install the package. Run yarn add vee-validate or npm install vee-validate --save in your project folder.
3Create the form. Import useForm from vee-validate and pass it a validationSchema with your rules.
4Define the fields. Call defineField for each field and bind the returned model and props to your inputs.
5Write the validation rules. Write functions that return true for valid values or an error message otherwise, or use yup or zod.
6Handle submission. Wrap your submit function in handleSubmit to receive the values and send them to your API.

Check the prerequisites and Vue version

vee-validate's main v4 line supports Vue 3.x only. The project needs a Vue.js 3.x app, Node.js and either npm or yarn.

If your project uses an older Vue version, the README includes a table that maps Vue 2.x to vee-validate 2.x or 3.x, and Vue 3.x to vee-validate 4.x or 5.x. Use the matching documentation link for your version.

Vue.js 3.x project
Node.js
npm or yarn

Install vee-validate with npm or yarn

Run one of the install commands from the project's root folder. Both come from the README.

# Install with yarn
yarn add vee-validate

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

Build a form with the composition API

The composition API is the fastest way to create a form and manage its validation, behavior and values. You create the form with useForm, define each field with defineField, and wrap your submit function in handleSubmit to receive the values.

The example uses a simple required function that returns true when a value is present, or an error message when it is empty. The README notes that you can also use yup or zod for validation schemas.

useForm creates the form and takes a validationSchema.
defineField('field') returns the field model and its props or attributes.
handleSubmit(values => ...) runs only with validated values, where you send data to your API.
errors.field displays the message for that field.

<script setup>
import { useForm } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Create the form
const { defineField, handleSubmit, errors } = useForm({
  validationSchema: {
    field: required,
  },
});

// Define fields
const [field, fieldProps] = defineField('field');

// Submit handler
const onSubmit = handleSubmit(values => {
  // Submit to API
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>

Use declarative Field and Form components instead

If you prefer templates over setup code, use the Field and Form components. Import them, pass a rules function to a Field by name, and read errors through the Form slot.

By default, the Field component renders an input of type text. The README points to the documentation for changing how fields render.

Import Field and Form from vee-validate.
Set the rule on each Field with :rules.
Use v-slot="{ errors }" on Form to show messages.

<script setup>
import { Field, Form } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Submit handler
function onSubmit(values) {
  // Submit to API
  console.log(values);
}
</script>

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

    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </Form>
</template>

Choose a style and find more detail

Both styles give you synchronous or asynchronous rules at field or form level, and both work with native HTML inputs or UI library components. The README describes the library as minimal, so it handles form concerns and leaves the rest of your app to you.

For the full API, read the documentation and demos on the project's v4 documentation site. The README also links to a v5 guide for the composition API, so check which version you are installing.

Composition API: fastest route for most forms.
Declarative components: good when you prefer templates.
Built-in rules: a companion package offers 25+ rules and 45+ locales for messages.

What people use it for

Adding required-field checks and error messages to a Vue 3 sign-up or contact form.
Validating a form whose inputs mix native HTML elements with components from an existing UI library.
Running asynchronous checks, such as validation that depends on a server response, alongside synchronous rules.
Using the built-in companion rules for common checks instead of writing each one yourself.

Frequently asked questions

Is vee-validate free to use?

Yes. The project is released under the MIT licence, which is stated in the README. Check the LICENSE file in the repository for the full terms.

Does vee-validate work with Vue 2?

The main v4 line supports Vue 3.x only. The README lists vee-validate 2.x or 3.x for Vue 2.x, and their documentation links are given there.

What do I need before installing vee-validate?

You need a Vue.js 3.x project, Node.js, and npm or yarn. Install it with yarn add vee-validate or npm install vee-validate --save.

What is the difference between useForm and the Field and Form components?

useForm with defineField is the composition API approach, which the README calls the fastest way to build a form. Field and Form are declarative components you place in your template. Both support the same validation idea.

Can I use vee-validate with yup or zod?

The README's examples mention that you can use yup or zod for validation alongside plain functions. Check the documentation for how to connect each one.

What are alternatives to vee-validate?

Projects that appear as comparable include Formik, FormKit, vuelidate and Zod-based form helpers. Formik is a React form library and its API inspired vee-validate v4, according to the README.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

vee-validate suits Vue 3 developers who want form validation without building it themselves, especially if they use a UI component library alongside custom inputs. It is not for non-developers, Vue 2 projects or apps that do not use Vue.js, so those readers should look at the version table in the README or a different library.

Install options & downloads