Build Better Vue Forms with the VueFormify Toolkit

Install & Download:

# NPM
$ npm install vue-formify

Description:

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:

Changelog:

0.0.32 (04/16/2024)

• bugfix