CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vee-validate

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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[];
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vee-validate@4.15.x
Publish Source
CLI
Badge
tessl/npm-vee-validate badge