Vorms

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 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', '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

• Login
• Field Array
• Cross Field Validate
• Wizard Form
• Custom Components
• UI Library - Vuetify
• UI Library - Element Plus
• Validate With Yup
• Validate With Zod

Thanks

This project is heavily inspired by the following awesome projects.

• Formik
• React Hook Form
• VeeValidate

Contributors

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

Made with contrib.rocks.

License

MIT License 2022-PRESENT Alex Liu