vue-form-builder

A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, create, upgrade, maintain,... Why need to code the form when you can use Vue-Form-Builder and render it with some extra steps :D

Advantages:

Less code in development (No need to do <form> <div> <input> .... </div> </form> this by your own)
Easy to maintain, update your Form in the future.
Setup your Form with a super friendly UI/UX.
Extensibility (Your custom control, styling,...)
Form Validation? I got you fam.
Included HTML5 structure, no tricks or cheats.
NO MORE JQUERY INCLUDED

Give this repo a ⭐ (star) if you actually like this and might use it for your project :D! Thank you!

Feel free to open an issue if you reach any bugs or issues. Thanks.

Vue Form Builder Documentation

Demo

Demo Online: Vue Form Builder ONLINE
Demo Form (Real Life Example):
- Vue Form Builder Real Life Example
- Repo: https://github.com/sethsandaru/demo-vue-form-builder

Supported Browsers


Latest ✔	Latest ✔	9+ ✔	Latest ✔	6.1+ ✔

How to install?

NPM / Yarn

npm i v-form-builder --save

Browser

Download the Latest Release

<link rel="stylesheet" href="https://github.com/sethsandaru/vue-form-builder/blob/master/v-form-builder.min.css">

<script src="https://github.com/sethsandaru/vue-form-builder/raw/master/vue.min.js"></script>
<script src="https://github.com/sethsandaru/vue-form-builder/raw/master/v-form-builder.umd.min.js"></script>

CDN

jsDelivr

Latest version (@2.1.0)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sethsandaru/vue-form-builder/dist/v-form-builder.min.css"> 
<script src="https://cdn.jsdelivr.net/gh/sethsandaru/vue-form-builder/dist/v-form-builder.umd.min.js"></script>

Installation Note

For the best experience, please install the latest version!
Version below @v2.0.0 has been deprecated. No maintain & fix bugs. Please use 2.0.0 or above.

Documentation

Main Documentation of Vue-Form-Builder

How to implement for a beginner?

Usage / Use-cases

Some of the use-cases I mentioned

APIs / Extending / Hard-core stuff

Visit Documentation

Dependencies

I carefully watch the dependencies of the Vue Form Builder, from the version 2.0.0 and above. Here is the list:

Vue JS (obviously) - But it won't be built together with the final library bundle
vuedraggable: From Sortable.JS which is very lightweight and much lighter than JQuery + JQuery UI
deep-equal: A simple method to check the Form Configuration
Datepicker - LitePicker (Super lightweight, ~5KB): https://wakirin.github.io/Litepicker/
DayJS - Parse/Formatting date (2KB): https://day.js.org/en/

See more at: package.json and look at the dependencies

My truly desire: Fewer dependencies as possible and try minimize the size as much as possible.

Release notes

2.1.0

Added Tab Section
Added Basic Role-based Configuration
Added regex Validation
Fixed bugs
Security updated

2.0.1

Added CSS Classes that worked for Material Design (Thanks to @abhimanusharma)
Fixed bugs
Security updated

2.0.0

New structural, new behaviour, everything is new.
Less and less ugly code
Make the process/development/configuration more simple than previous version.
Less dependencies / JQuery totally removed

License

MIT License

Developing the Vue Form Builder

For hard-core developers, of course, you can clone this repository and then getting started with these steps:

npm install - obviously
npm run serve - this will run the main.ts which is the main web page to see the Vue Form Builder

Then you will know what you can take a look next: configs, components, views,...

Custom Form Builder

I'm always available for Custom Build based on your needs for the Vue Form Builder. You can contact me via:

Email: phattranminh96@gmail.com
LinkedIn (On my main profile page)

Supporting the project

You can see the lovely Sponsor button on the top. If you want to contribute a little, send me a coffee is good enough.

Also, please show your love by giving this repository a ⭐ (star). That would lighten up my day.

sethsandaru / vue-form-builder

readme