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>

For a more advanced usage visit the Docs

💜 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