How to Use vee-validate in Vue for Form Validation

To use vee-validate in Vue, install it via npm, then import and use its composables like useField and useForm inside your Vue component's setup function. Define validation rules and bind inputs to these fields to automatically validate and show errors.

Syntax

vee-validate uses composables inside Vue's setup function. You use useForm to create a form context and useField to register each input with validation rules. Bind the input's value and error messages to the returned objects.

• useForm(): Initializes form state and validation.
• useField(name, rules): Registers a field with a name and validation rules.
• value: Reactive value of the input.
• errorMessage: Reactive string showing validation error.
• handleSubmit(callback): Handles form submission with validation.

vue

import { defineComponent } from 'vue';
import { useForm, useField } from 'vee-validate';
import * as yup from 'yup';

export default defineComponent({
  setup() {
    const { handleSubmit } = useForm();
    const { value: email, errorMessage: emailError } = useField(
      'email',
      yup.string().required().email()
    );

    const onSubmit = handleSubmit(values => {
      console.log('Form submitted:', values);
    });

    return { email, emailError, onSubmit };
  }
});

Example

This example shows a simple form with an email input validated for required and email format. Errors show below the input. On submit, valid data logs to the console.

vue

<template>
  <form @submit.prevent="onSubmit">
    <label for="email">Email:</label>
    <input id="email" v-model="email" type="email" aria-describedby="email-error" />
    <span id="email-error" style="color: red;" v-if="emailError">{{ emailError }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { useForm, useField } from 'vee-validate';
import * as yup from 'yup';

const { handleSubmit } = useForm();
const { value: email, errorMessage: emailError } = useField(
  'email',
  yup.string().required('Email is required').email('Email must be valid')
);

const onSubmit = handleSubmit(values => {
  alert(`Form submitted with email: ${values.email}`);
});
</script>

Output

A form with an email input and a submit button. If the email is empty or invalid, a red error message appears below the input. On valid submit, an alert shows the entered email.

Common Pitfalls

• Not wrapping validation rules in a schema or function can cause errors.
• Forgetting to use handleSubmit to validate before submitting leads to invalid data.
• Not binding v-model to the value from useField breaks reactivity.
• Ignoring accessibility by missing aria-describedby for error messages.

Always use yup or similar schema for clear rules and handle submission with handleSubmit.

vue

/* Wrong way: Missing handleSubmit and v-model binding */
<form @submit.prevent="submit">
  <input type="text" />
  <button type="submit">Submit</button>
</form>

/* Right way: Using handleSubmit and binding v-model */
<form @submit.prevent="onSubmit">
  <input v-model="email" type="email" />
  <button type="submit">Submit</button>
</form>

Quick Reference

Feature	Description	Example
useForm	Creates form context and manages validation	const { handleSubmit } = useForm();
useField	Registers a field with validation rules	const { value, errorMessage } = useField('name', yup.string().required());
handleSubmit	Wraps submit handler to validate form	const onSubmit = handleSubmit(values => { ... });
Validation Rules	Use yup or string rules for validation	yup.string().required().email()
Error Display	Show errorMessage reactively below inputs	{{ errorMessage }}

Key Takeaways

Install vee-validate and yup to handle form validation in Vue easily.

Use useForm and useField composables inside setup() to register fields and rules.

Always wrap your submit logic with handleSubmit to validate before processing.

Bind input values with v-model to the reactive value from useField for reactivity.

Show errorMessage reactively and use aria attributes for accessibility.