yarn add vue-form-handler
npm i --save vue-form-handler
- 💪 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
<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><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><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><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.
<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
This project is heavily inspired by other awesome projects like:
MIT License © 2022-PRESENT Dennis Bosmans