vee-validate

Vee-validate provides a collection of Composition API helpers that allow you to opt-in to specific parts of form state and actions without needing to use the full useForm or useField hooks. These helpers are useful for building specialized UI components such as:

• Custom submission progress indicators
• Custom error message components
• Form validity indicators
• Custom reset or submit buttons

To use HTML checkboxes or radio inputs (or custom components acting as such) with vee-validate, ensure the following requirements are met:

1. Form Context: The fields must be inside a Form component or a custom component created using the useForm API.
2. Naming: All inputs in a group (e.g., a set of radio buttons or a set of checkboxes) must have the same name prop.
3. Type Attribute: The fields should have a type attribute (type="checkbox" or type="radio").

The @vee-validate/nuxt module provides several developer experience improvements for Nuxt projects:

1. Auto-imports: Automatically imports vee-validate components and composables so they are available in your templates and script setup without manual import statements.
2. Schema Detection: Automatically detects if you are using zod or yup and exposes the appropriate toTypedSchema helper.
3. Type Safety: While the module avoids exposing types by default to prevent conflicts with other libraries, you can still import all necessary types directly from the main vee-validate package.

You can map technical field names to human-readable names in different languages by adding a names property to your locale dictionary. When a rule fails, @vee-validate/i18n will attempt to replace the field name with the corresponding entry in the names object for the active locale.

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';

configure({
  generateMessage: localize({
    en: {
      names: {
        age: 'Age',
      },
    },
    ar: {
      names: {
        age: 'السن',
      },
    },
  }),
});

To show loading indicators or disable submit buttons during an API call, use the isSubmitting slot prop.

isSubmitting becomes true when validation starts (via a submit event) and remains true until your submission handler (passed to onSubmit or handleSubmit) completes or throws an error.

Note: Calling the validate() function manually does not change the isSubmitting state; it only changes when an actual submission attempt is triggered.

<template>
  <Form v-slot="{ isSubmitting }">
    <Field name="email" />
    <button :disabled="isSubmitting">
      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
    </button>
  </Form>
</template>

When using the ErrorMessage component, keep the following constraints in mind:

• Form Context: The ErrorMessage component must be used inside a Form component; otherwise, it cannot access the error state.
• Scope: ErrorMessage can only display errors for fields that exist within the same Form. It cannot reference fields located in a different form.

Vee-validate manages the collection of values for these input types as follows:

• Radio Inputs: Radio groups must have type="radio" and the same name. The currently selected value is assigned to the values object under the field's name key.
• Checkbox Inputs (Multiple): When multiple checkboxes share the same name and have type="checkbox", their selected values are collected into an array, mimicking standard v-model behavior.
• Checkbox Inputs (Single): If only one checkbox is associated with a name, its value is assigned directly to the values object as a single value rather than an array.

vee-validate is UI-agnostic and does not provide special treatment for specific components. It works with any UI library as long as the components emit the correct events and allow for outsourcing form logic to a third party.

Integration strategies vary depending on how a library tracks field values and manages its internal form state. If a UI library's built-in validation is insufficient, you can use vee-validate to power the validation logic for those components.

Vee-validate provides granular control over which DOM or Vue events trigger validation.

Scope Limitation: The following event-based configuration options apply only to the <Field /> component and do not affect the useField composable:

• validateOnBlur
• validateOnChange
• validateOnInput
• validateOnModelUpdate

To control these, use the configure function with the desired boolean values.