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 😄

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 😄! 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="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.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?

• Turning Up The Form
• Form Builder
• Form Renderer

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: [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!