Vue-form-handler NPM

📦 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>