Build Better Vue Forms with the VueFormify Toolkit

VueFormify is a lightweight yet powerful form creation component for Vue that gives developers complete freedom and flexibility.

It removes the headaches from building Vue forms with an array of handy features:

  • Auto-collects form values for you, no configuration needed
  • Handles nested objects and arrays with ease
  • Access values directly with v-model if desired
  • Simple API to create custom inputs
  • Integrates seamlessly with UI frameworks like Bootstrap or Tailwind
  • Submits JSON or FormData format
  • Includes basic inputs like text, checkbox, radio, and error
  • Tiny footprint at only 3kB gzipped
  • Resets forms programmatically with one method

Basic usage:

1. Import the components into your project.

import { 
} from 'vue-formify';

2. Build a basic form.

  <FormifyForm @submit="sendForm">
    <FormifyInput name="first_name" />
    <FormifyInput name="last_name" />
    <FormifyCheckbox name="check" label="Check this" />
    <FormifyRadio name="radio" value="foo" label="Foo" />
    <FormifyRadio name="radio" value="bar" label="Bar" />
    <FormifyRadio name="radio" value="baz" label="Baz" />
type FormData = {
  first_name: string;
  last_name: string;
const sendForm = (data: FormData) => {


Build Better Vue Forms with the VueFormify Toolkit


0.0.30 (04/13/2024)

  • bugfix

Download Details:

Author: mateenagy

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-formify

Add Comment