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 { 
  FormifyForm, 
  FormifyInput,
  FormifyCheckbox,
  FormifyRadio,
  ...
} from 'vue-formify';

2. Build a basic form.

<template>
  <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" />
    <button>Send</button>
  </FormifyForm>
</template>
type FormData = {
  first_name: string;
  last_name: string;
}
const sendForm = (data: FormData) => {
  console.log(data);
};

Preview:

Build Better Vue Forms with the VueFormify Toolkit

Changelog:

0.0.30 (04/13/2024)

  • bugfix

Download Details:

Author: mateenagy

Live Demo: https://vue-formify.matenagy.me/guide/#create-form

Download Link: https://codeload.github.com/mateenagy/vue-formify/zip/refs/heads/main

Official Website: https://github.com/mateenagy/vue-formify

Install & Download:

# NPM
$ npm install vue-formify

Add Comment