Unleash Form-Building Freedom! 🚀

VueFormify is a form creation package that liberates developers to create forms with freedom! VueFormify is not just a form package; it's your ticket to form-building autonomy, empowering you to craft both simple and complex forms with a bare yet robust skeleton.

Features

• Auto collect form values
• Nested Objects and Arrays
• Form level validation integration with (external modules)
• joi
• yup
• zod
• valibot
• Integrated libraries (external modules)
• PrimeVue
• Element Plus
• Ionic
• Easy to create custom or third party components
• You can access values with v-model if you want
• Using JSON or FormData
• 4 basic input component: Input, Checkbox, Radio, Error
• No styling: use anything you want from Bootstrap to Tailwind
• Only 3kb (gzipped)

📚 Documentation

Read more in the documentation

📦 Install

npm i vue-formify

💻 Usage

<script lang="ts" setup>
import { ref } from 'vue';
import { FormifyForm, FormifyInput } from 'vue-formify';

type SimpleForm = {
	email: string;
}

const form = ref()

const sendForm = (data: SimpleForm) => {
	if(!data.email) {
		return form.setError('email', 'Email required')
	}

	console.log(data);
};
</script>

<template>
	<FormifyForm @submit="sendForm" v-slot="{errors}">
		<FormifyInput name="email" />
		<span class="error">{{ errors.email }}</span>
		<button>Send</button>
	</FormifyForm>
</template>