Document

Install

# npmnpm i vue-use-form# pnpmpnpm i vue-use-form# yarnyarn add vue-use-form

🚀Features

TODO

🎁Try it online

🚣playground

# 1. open this repo folder in your local# 2. init dependenciespnpm i# 3. open the playground folder and run `dev` script orpnpm run dev

Quick Start

<script setup lang="ts">import {useForm }from'vue-use-form'interfaceInputs {  username:string  password:string  age:number}const {  formState,  register,  createSubmitHandler,  createErrorHandler,}=useForm<Inputs>({  mode:'onChange',  shouldFocusError:true,})const [usernameField, usernameRef]=register('username', {  required:'Username is required!',  minLength: { value:3, message:'Username must be at least 3 characters' },  maxLength: { value:10, message:'Username must be at most 10 characters' },validate: (value)=> {if (value==='admin') {return'Username is reserved!'    }  },})const [passwordField, passwordRef]=register('password', {  required:'Password is required!',  minLength: { value:8, message:'Password must be at least 8 characters' },  maxLength: { value:20, message:'Password must be at most 20 characters' },  validate: {isContainLowercase: (value)=> {if (!/[a-z]/.test(value)) {return'Password must contain at least one lowercase letter'      }    },isContainUppercase: (value)=> {if (!/[A-Z]/.test(value)) {return'Password must contain at least one uppercase letter'      }    },  },})const onSubmit=createSubmitHandler((data)=> {console.log('validate success',data)})const onError=createErrorHandler((errors)=> {console.log('validate error',errors)})</script><template>  <form@submit.prevent="handleSubmit(onSubmit, onError)()">    <inputref="usernameRef"v-model="usernameField"name="username">    <inputref="passwordRef"v-model="passwordField"name="password">    <inputv-form="register('age', {          required: 'Age is required!',          min: { value: 18, message: 'Age must be at least 18' },          max: { value: 10000, message: '?' },          valueAsNumber: true,        })"type="number"name="age">    <buttontype="submit"v-text="'Submit'" />  </form></template>

use with schema

use with unplugin-vForm

<script setup lang="ts">import {useForm}from'vue-use-form'const {  register,formState: {errors},}=useForm<{  email:string  age:number}>({  mode:'onChange',})</script><template>  <inputv-form="register('email', {    required: true  })">  <inputv-form="register('age', {    required: true,  })"></template>