Build powerful, type-safe forms in Vue.
VueFormify is a form-building library for Vue that simplifies creating both simple and complex forms. It offers type safety and a minimal bundle size (~4kb gzipped), making it both secure and efficient.
Features
- Type Safe: Ensures accurate data types and autocompletion across fields.
- Auto Collect Values: Seamlessly gathers form data.
- Supports Nested Objects and Arrays: Easily handle complex data structures.
- Easy Third-Party Integrations: Flexible to work with other libraries.
- Customizable Components: Easily build and integrate custom components.
- Lightweight: Small footprint for a faster, more responsive app.
📚 Documentation
Read more in the documentation
📦 Install
npm i vue-formify💻 Usage
Basic
<script lang="ts" setup>
import { useForm } from 'vue-formify';
type FormData = {
username: string;
password: string;
}
const {
Form,
Field,
Error,
handleSubmit,
} = useForm<FormData>();
const sendForm = handleSubmit((data) => {
console.log(data)
})
</script>
<template>
<Form @submit="sendForm">
<Field name="email" as="input" />
<Error error-for="email" />
<button>Send</button>
</Form>
</template>