or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-rules.mdcore-validation.mdfield-management.mdform-actions.mdform-management.mdindex.mdstate-access.mdvue-components.md
tile.json

tessl/npm-vee-validate

Painless forms for Vue.js with comprehensive validation, composition API, and component-based approaches.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vee-validate@4.15.x

To install, run

npx @tessl/cli install tessl/npm-vee-validate@4.15.0

index.mddocs/

VeeValidate

VeeValidate is a powerful Vue.js form validation library that provides comprehensive validation capabilities through both Composition API and component-based approaches. It offers field-level and form-level validation, dynamic field arrays, extensive state management, and seamless integration with popular validation schema libraries like Yup, Zod, and Joi.

Package Information

  • Package Name: vee-validate
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vee-validate
  • Peer Dependencies: Vue.js ^3.4.26

Core Imports

import { 
  useForm, 
  useField, 
  validate, 
  defineRule,
  Field,
  Form,
  ErrorMessage
} from "vee-validate";

For CommonJS:

const { 
  useForm, 
  useField, 
  validate, 
  defineRule,
  Field,
  Form,
  ErrorMessage
} = require("vee-validate");

Basic Usage

import { useForm, useField } from "vee-validate";

// Basic form with validation
const { handleSubmit, errors } = useForm();

const { value: email, errorMessage: emailError } = useField('email', (value) => {
  if (!value) return 'Email is required';
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Email is invalid';
  return true;
});

const { value: password, errorMessage: passwordError } = useField('password', (value) => {
  if (!value) return 'Password is required';
  if (value.length < 6) return 'Password must be at least 6 characters';
  return true;
});

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

Architecture

VeeValidate is built around several key architectural components:

  • Composition API: Core composables (useForm, useField, useFieldArray) for reactive form state management
  • Vue Components: Renderless components (Field, Form, FieldArray, ErrorMessage) for template-based forms
  • Validation Engine: Flexible validation system supporting functions, rules, and schemas
  • State Management: Comprehensive tracking of form state (touched, dirty, valid, errors, etc.)
  • Field Arrays: Dynamic array field management for complex forms
  • Schema Integration: Built-in support for Yup, Zod, Joi, and custom TypedSchema implementations

Capabilities

Core Validation

Core validation functions for standalone field and object validation without Vue context.

function validate<TInput, TOutput>(
  value: TInput,
  rules: string | Record<string, unknown> | GenericValidateFunction | GenericValidateFunction[] | TypedSchema,
  options?: ValidationOptions
): Promise<ValidationResult<TOutput>>;

function validateObject<TValues extends GenericObject, TOutput extends GenericObject = TValues>(
  schema: RawFormSchema<TValues>,
  values: TValues,
  options?: { names?: Record<string, string>; bailsMap?: Record<string, boolean> }
): Promise<FormValidationResult<TValues, TOutput>>;

Core Validation

Form Management

Form-level composables for managing complete form state, validation, and submission handling.

function useForm<TValues extends GenericObject = GenericObject, TOutput extends GenericObject = TValues>(
  options?: FormOptions<TValues>
): FormContext<TValues, TOutput>;

function useFormContext<TValues extends GenericObject = GenericObject, TOutput extends GenericObject = TValues>(): FormContext<TValues, TOutput>;

Form Management

Field Management

Field-level composables for individual field validation, state management, and value binding.

function useField<TValue = unknown>(
  path: MaybeRefOrGetter<string>,
  rules?: MaybeRef<RuleExpression<TValue>>,
  options?: Partial<FieldOptions<TValue>>
): FieldContext<TValue>;

function useFieldArray<TValue = unknown>(
  arrayPath: MaybeRefOrGetter<string>
): FieldArrayContext<TValue>;

Field Management

State Access

Composables for accessing reactive form and field state information.

function useFieldValue<TValue = unknown>(path?: MaybeRefOrGetter<string>): ComputedRef<TValue | undefined>;
function useFieldError(path?: MaybeRefOrGetter<string>): ComputedRef<string | undefined>;
function useFormValues<TValues extends GenericObject = GenericObject>(): ComputedRef<Partial<TValues>>;
function useFormErrors<TValues extends GenericObject = GenericObject>(): ComputedRef<FormErrors<TValues>>;

State Access

Form Actions

Composables for programmatically controlling form behavior, validation, and state mutations.

function useValidateForm(): (opts?: Partial<ValidationOptions>) => Promise<FormValidationResult>;
function useValidateField(): <TPath extends Path<any>>(path: TPath, opts?: Partial<ValidationOptions>) => Promise<ValidationResult>;
function useSubmitForm(): <TReturn = unknown>(
  onSubmit?: SubmissionHandler<any, any, TReturn>,
  onInvalidSubmit?: InvalidSubmissionHandler
) => (e?: Event) => Promise<TReturn | undefined>;
function useResetForm(): (state?: Partial<FormState>, opts?: Partial<ResetFormOpts>) => void;

Form Actions

Vue Components

Renderless Vue components for template-based form development with validation.

// Field component for individual form fields
interface FieldProps {
  name: string;
  rules?: RuleExpression;
  as?: string | Component;
  validateOnMount?: boolean;
  validateOnBlur?: boolean;
  validateOnChange?: boolean;
  validateOnInput?: boolean;
  validateOnModelUpdate?: boolean;
  bails?: boolean;
  label?: string;
  uncheckedValue?: any;
  modelValue?: any;
  keepValue?: boolean;
}

// Form component for form context
interface FormProps {
  as?: string | Component;
  validationSchema?: object;
  initialValues?: object;
  initialErrors?: object;
  initialTouched?: object;
  validateOnMount?: boolean;
  onSubmit?: SubmissionHandler;
  onInvalidSubmit?: InvalidSubmissionHandler;
  keepValues?: boolean;
  name?: string;
}

Vue Components

Configuration and Rules

Global configuration and custom validation rule definition.

function defineRule<TValue = unknown, TParams extends any[] = any[]>(
  id: string,
  validator: ValidationRuleFunction<TValue, TParams> | SimpleValidationRuleFunction<TValue, TParams>
): void;

function configure(config: Partial<VeeValidateConfig>): void;

interface VeeValidateConfig {
  bails?: boolean;
  generateMessage?: ValidationMessageGenerator;
  validateOnInput?: boolean;
  validateOnChange?: boolean;
  validateOnBlur?: boolean;
  validateOnModelUpdate?: boolean;
}

Configuration and Rules

Core Types

interface ValidationResult<TValue = unknown> {
  errors: string[];
  valid: boolean;
  value?: TValue;
}

interface FormValidationResult<TInput extends GenericObject, TOutput extends GenericObject = TInput> {
  valid: boolean;
  results: Partial<FlattenAndMapPathsValidationResult<TInput, TOutput>>;
  errors: Partial<Record<Path<TInput>, string>>;
  values?: Partial<TOutput>;
  source: 'schema' | 'fields' | 'none';
}

interface FieldMeta<TValue> {
  touched: boolean;
  dirty: boolean;
  valid: boolean;
  validated: boolean;
  required: boolean;
  pending: boolean;
  initialValue?: TValue;
}

interface FormMeta<TValues extends GenericObject> {
  touched: boolean;
  dirty: boolean;
  valid: boolean;
  pending: boolean;
  initialValues?: Partial<TValues>;
}

interface FieldState<TValue = unknown> {
  value: TValue;
  touched: boolean;
  errors: string[];
}

interface FormState<TValues> {
  values: PartialDeep<TValues>;
  errors: Partial<Record<Path<TValues>, string | undefined>>;
  touched: Partial<Record<Path<TValues>, boolean>>;
  submitCount: number;
}

interface TypedSchema<TInput = any, TOutput = TInput> {
  __type: 'VVTypedSchema';
  parse(values: TInput, context?: TypedSchemaContext): Promise<{ value?: TOutput; errors: TypedSchemaError[] }>;
  cast?(values: Partial<TInput>): TInput;
  describe?(path?: Path<TInput>): Partial<TypedSchemaPathDescription>;
}

type GenericValidateFunction<TValue = unknown> = (
  value: TValue,
  ctx: FieldValidationMetaInfo
) => MaybePromise<boolean | MaybeArray<string>>;

type Path<T> = T extends any ? PathInternal<T, T, true> & string : never;
type PathValue<T, P extends Path<T> | ArrayPath<T>> = T extends any
  ? P extends `${infer K}.${infer R}`
    ? K extends keyof T
      ? R extends Path<T[K]>
        ? PathValue<T[K], R>
        : never
      : K extends `${ArrayKey}`
        ? T extends ReadonlyArray<infer V>
          ? PathValue<V, R & Path<V>>
          : never
        : never
    : P extends keyof T
      ? T[P]
      : P extends `${ArrayKey}`
        ? T extends ReadonlyArray<infer V>
          ? V
          : never
        : never
  : never;

type GenericObject = Record<string, any>;
type MaybeRef<T> = T | Ref<T>;
type MaybeRefOrGetter<T> = T | Ref<T> | (() => T);
type MaybePromise<T> = T | Promise<T>;
type MaybeArray<T> = T | T[];