Form Builder With Vue Composition API – Hooks Form

The Hooks Form allows you to easily build HTML forms with Vue composition API.

How to use it:

1. Import the Hooks Form module.

import { useForm } from 'vue-hooks-form'

2. In your app template:

<template>
  <form @submit="onSubmit">
    <label>Username</label>
    <input v-model="username.value" :ref="username.ref" />
    <p v-if="username.error">{{ username.error.message }}</p>
    <label>Password</label>
    <input v-model="password.value" :ref="password.ref" type="password" />
    <p v-if="password.error">{{ password.error.message }}</p>
    <button type="submit">submit</button>
  </form>
</template>

3. Setup your form.

export default {
  setup() {
    const { useField, handleSubmit } = useForm({
      defaultValues: {},
    })
    const username = useField('username', {
      rule: { required: true },
    })
    const password = useField('password', {
      rule: {
        required: true,
        min: 6,
        max: 10,
      },
    })
    const onSubmit = (data) => console.log(data)
    return {
      username,
      password,
      onSubmit: handleSubmit(onSubmit),
    }
  },
}

Preview:

Changelog:

v0.3.0 (01/15/2023)

• chore: support vue2 by using vue-demi

Download Details:

Author: beizhedenglong

Live Demo: https://codesandbox.io/s/vue-hooks-form-demo-lqtp0?fontsize=14&hidenavigation=1&theme=dark

Download Link: https://github.com/beizhedenglong/vue-hooks-form/archive/master.zip

Official Website: https://github.com/beizhedenglong/vue-hooks-form

Install & Download:

# Yarn
$ yarn add vue-hooks-form

# NPM
$ npm i vue-hooks-form --save