Skip to content

Mini-ghost/vorms

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

* chore: setup compressed size

* chore: update action

* chore: update action

* chore: update action

* chore: update action

* chore: update action

* chore: update action
df4dfff

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
April 28, 2022 01:21
April 28, 2022 01:21
January 8, 2023 10:13
November 19, 2022 16:17
April 28, 2022 01:21
April 28, 2022 01:21
April 28, 2022 01:21
April 28, 2022 01:21
July 8, 2022 23:08
January 11, 2023 23:23
January 8, 2023 10:13
January 8, 2023 10:13

Vorms - Vue Form Validation with Composition API
Vue Form Validation with Composition API

NPM version Documentations NPM Downloads
GitHub stars

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

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