vorms - Vue Form Validation with Composition API

Vue Form Validation with Composition API

Feature

Type Strong: Written in TypeScript, with TSDoc.
Lightweight: Only 12kb compressed (4kb compressed + gzip compressed) and fully tree-shaking.
Easiest: Vorm uses the Composition API to give you a very seamless development experience.
Flexible: Yup, Zod, Valibot and self-def validation are supported.

Install

npm install @vorms/core

CDN

<script src="https://unpkg.com/@vorms/core"></script>

It will be exposed to global as window.Vorms

Usage

setup script

import { useForm } from '@vorms/core'

const sugarOptions = ['no', 'light', 'half', 'standard']

const { register, handleSubmit, handleReset } = useForm({
  initialValues: {
    drink: '',
    sugar: 'light',
  },
  onSubmit(data) {
    console.log(data)
  }
})

const { value: drink, attrs: drinkFieldAttrs } = register('drink')
const { value: sugar, attrs: sugarFieldAttrs } = register('sugar')

template

<form @submit="handleSubmit" @reset="handleReset">
  <label>Drink</label>
  <input v-model="drink" type="text" v-bind="drinkFieldAttrs">

  <label>Sugar level</label>
  <select v-model="sugar" v-bind="sugarFieldAttrs">
    <option v-for="item in sugarOptions" :key="item" :value="item">
      {{ item }}
    </option>
  </select>

  <button type="reset">Reset</button>
  <button type="submit">Submit</button>
</form>

Refer documentations for more details.

Examples

Thanks

This project is heavily inspired by the following awesome projects.

Contributors

Thanks to the wonderful people who have already contributed to Vorms!

Made with contrib.rocks.