sethsandaru / Vue Form Builder
Projects that are alternatives of or similar to Vue Form Builder
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.
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):
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="v-form-builder.min.css">
<script src="vue.min.js"></script>
<script src="v-form-builder.umd.min.js"></script>
CDN
jsDelivr
Latest version (@2.0.1)
<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
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.JSwhich 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.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
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: [email protected]
- 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.
Copyright © 2018 by Seth Phat aka Phat Tran!