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.
Contributors
Thanks to the wonderful people who have already contributed to Vorms!
Made with contrib.rocks.
License
MIT License © 2022-PRESENT Alex Liu