Introducing Vorms: A Lightweight 12KB Form Validation Library for Vue 3

Form validation is a perennial headache in frontend development, but the library Vorms —highly praised by 尤雨溪 —offers a compact, 12KB solution that integrates tightly with Vue 3 and its Composition API.

What is Vorms?

Vorms is a Vue 3 form‑validation library built with the Composition API. It is lightweight, flexible, and enables developers to achieve strong validation capabilities with minimal code.

Beyond its tiny footprint, Vorms supports a variety of validators to meet complex requirements.

Why Choose Vorms?

Strong typing support : Written in TypeScript with TSDoc annotations, providing intelligent hints and type checking even in JavaScript projects.

Lightweight design : After compression it is only 12KB and supports tree‑shaking, ensuring no performance penalty.

Simple to use : The API follows Vue 3's Composition API, making it straightforward for beginners.

Highly flexible : Compatible with popular validation libraries such as Yup and Zod, and allows custom rule definitions.

How to Use Vorms?

Install the package with a single command:

npm install @vorms/core

Example usage:

<script setup lang="ts">
import { useForm } from '@vorms/core';

const { register, handleSubmit } = useForm({
  initialValues: { email: '', password: '' },
  onSubmit(data) { console.log('提交数据：', data); },
});

const { value: email, attrs: emailAttrs } = register('email');
const { value: password, attrs: passwordAttrs } = register('password');
</script>

<template>
  <form @submit="handleSubmit">
    <label>Email</label>
    <input v-model="email" v-bind="emailAttrs" />

    <label>Password</label>
    <input v-model="password" v-bind="passwordAttrs" />

    <button type="submit">提交</button>
  </form>
</template>

Inspiration Behind Vorms

The design of Vorms draws from several well‑known open‑source projects:

Formik : A celebrated React form library that inspired Vorms' powerful and extensible features.

React Hook Form : Its approach to simplifying form handling influenced Vorms' streamlined API.

VeeValidate : Provided deep Vue ecosystem integration and user‑friendly validation, serving as a key reference.

By combining these ideas with Vue 3's Composition API, Vorms delivers an elegant, flexible, and high‑performance form solution for developers.