minai621 / vue-form-handler

An easy, flexible and performant form handler for Vue 3

vue-form-handler

The easy way of handling your vue forms

📦 Installation

---

yarn add vue-form-handler

npm i --save vue-form-handler

🚀 Features

---

• 💪 Type strong: Written in TypeScript
• 🔩 Flexible: you can wrap the form handler over native inputs or any other like the ones from material libraries or custom inputs.
• 🪶 Super light: Small package size
• 💻 DX: Great development experience

🦄 Usage

---

Basic usage

<template>
  <form @submit.prevent="handleSubmit(successFn)">
    <input v-bind="register('firstName')" />
    <input v-bind="register('lastName')" />
    <input v-bind="register('age')" type="number" />
    <input type="submit" />
  </form>
</template>
<script setup lang="ts">
import { useFormHandler } from 'vue-form-handler'
const { register, handleSubmit } = useFormHandler()
const successFn = (form: Record<string, any>) => {
  console.log({ form })
}
</script>

Validations

<template>
  <form @submit.prevent="handleSubmit(successFn)">
    <input
      v-bind="
        register('firstName', {
          required: 'This field is required',
        })
      "
    />
    <p>{{ formState.errors.firstName }}</p>
    <input v-bind="register('lastName')" />
    <input
      v-bind="
        register('age', {
          min: {
            value: 18,
            message: 'Your age is below the accepted range',
          },
        })
      "
      type="number"
    />
    <p>{{ formState.errors.age }}</p>
    <input type="submit" />
  </form>
</template>
<script setup lang="ts">
import { useFormHandler } from 'vue-form-handler'
const { formState, register, handleSubmit } = useFormHandler()
const successFn = (form: Record<string, any>) => {
  console.log({ form })
}
</script>

Integration with Material frameworks

<template>
  <form @submit.prevent="handleSubmit(successFn)">
    <q-input v-bind="register('name')" />
    <q-checkbox v-bind="register('married')" />
    <q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
    <input type="submit" />
  </form>
</template>
<script setup lang="ts">
import { useFormHandler } from 'vue-form-handler'
const { formState, register, handleSubmit } = useFormHandler()
const successFn = (form: Record<string, any>) => {
  console.log({ form })
}
</script>

Typescript support

<template>
  <form @submit.prevent="handleSubmit(successFn)">
    <q-input v-bind="register('name')" />
    <q-checkbox v-bind="register('married')" />
    <q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
    <input type="submit" />
  </form>
</template>
<script setup lang="ts">
import { useFormHandler } from 'vue-form-handler'
interface MyFormInterface {
  name: string
  married: boolean
  pet: string
}
const { register, handleSubmit } = useFormHandler<MyFormInterface>()
const successFn = (form: MyFormInterface) => {
  console.log({ form })
}
</script>

By doing this you will get full type support on all the interactions with any formhandler resource.

Centralized and declarative form building

<template>
  <form @submit.prevent="handleSubmit(successFn)">
    <q-input v-bind="form.name" />
    <q-checkbox v-bind="form.married" />
    <q-select v-bind="form.pet" :options="['dog', 'cat', 'mouse']" />
    <input type="submit" />
  </form>
</template>
<script setup lang="ts">
import { useFormHandler } from 'vue-form-handler'
interface MyFormInterface {
  name: string,
  married: boolean,
  pet: string,
}
const { build, handleSubmit } = useFormHandler<MyFormInterface>()
const form = build({
  name: {}
  married: {}
  pet: {}
})
const successFn = (form: MyFormInterface) => {
  console.log({ form })
}
</script>

For a more advanced usage visit the Docs

📈 Project activity

---

💜 Thanks

---

This project is heavily inspired by other awesome projects like:

• jaredpalmer/formik
• react-hook-form/react-hook-form

📄 License

---

MIT License © 2022-PRESENT Dennis Bosmans