vue-use-form(WIP)

Documentation(🔨WIP…)

中文文档(🔨施工中…)

Why hasn’t it been updated these days?

I’m sorry I haven’t updated these days, because my school has some heavy tasks, I really can’t spare myself to continue to do it. However, I promise to continue to improve this library during the summer vacation. I love the usage of react-hook-form, and I will transplant the convenience it brings to Vue.

2022/06/08

🎉Thanks logaretm for giving us the name of lib

Install

pnpm

pnpm i vue-use-form

yarn

yarn add vue-use-form">

# npm
npm i vue-use-form

# pnpm
pnpm i vue-use-form

# yarn
yarn add vue-use-form

🚀Features

  • 🦾 Type Strong: Written in TypeScript
  • 🏆 No Component: No need to import any components to use, you can use it in all UI framework
  • 😍 Easy to use: Just 3 main hooks: useForm, useFormState, useFieldArray

TODO

  • 🐵Main features
    • 🍉useForm
    • 🍊useFormState
    • 🍋useFieldArray
    • 🥝directive: v-form
    • 🍎schema
      • 🍵 class-validator
      • 🍶 Yup
      • 🍷 Zod
      • 🍸 Vest
  • Security
    • 🐯Unit test
  • 🐼 Community(WIP…)
    • 🎋中文文档
    • 📖Documentation
  • 🦊Compatible UI framework(A way to get input/select/textarea dom)
    • 🍤element-plus
    • 🍗ant-design-vue
    • 🥩vuetify
    • 🥓quasar
    • 🌮provide a function to let the user to get the dom
    • 🎨other UI framework…

🎁Try it online

🎮play with element-plus by default way.

🎮play with class-validator by using class-validator resolver

🚣playground

you can fork/download this repo, and then just 3 steps can make playground run

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

Quick Start

<script setup lang="ts"> import { useForm } from 'vue-use-form' interface Inputs { username: string password: string age: number } const { formState, register, createSubmitHandler, createErrorHandler, reset, handleSubmit, setError, clearErrors, setValue, setFocus, getValues, triggerValidate, getFieldState, unregister, } = 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 [ageField, ageRef] = register('age', { required: 'Age is required!', min: { value: 18, message: 'Age must be at least 18' }, max: { value: 10000, message: '?' }, valueAsNumber: true, }) 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)()"> <input ref="usernameRef" v-model="usernameField" name="username"> <input ref="passwordRef" v-model="passwordField" name="password"> <input ref="ageRef" v-model="ageField" type="number" name="age"> <button type="submit" v-text="'Submit'" /> </form> </template>

Start with class-validator

⚠️ Remember to add these options to your tsconfig.json!

"strictPropertyInitialization": false,
"experimentalDecorators": true
<script lang="ts" setup> import { IsString, Length, IsEmail } from 'class-validator' import { useClassValidator } from '@vue-use-form/class-validator' import { useForm } from 'vue-use-form' class LoginForm { @IsString() @Length(3, 10) username: string @IsEmail() email: string } const resolver = useClassValidator(LoginForm) const { register, createSubmitHandler, createErrorHandler } = useForm<LoginForm>({ resolver, mode: 'onChange', }) const [usernameField] = register('username') const [emailField] = register('email') const onSubmit = createSubmitHandler((data) => { console.log(data) }) const onError = createErrorHandler((errors) => { console.log(errors) }) </script> <template> <form @submit.prevent="handleSubmit(onSubmit, onError)()"> <input v-model="usernameField" /> <input v-model="emailField" /> </form> </template>

GitHub

View Github