vue-use-form(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