Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Latest commit

 

History

History
140 lines (98 loc) · 5.83 KB

README.md

File metadata and controls

140 lines (98 loc) · 5.83 KB
Raw

vue-form-builder

npm version GitHub license img img

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

Supported Browsers

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 9+ ✔ Latest ✔ 6.1+ ✔

How to install?

NPM / Yarn

npm i v-form-builder --save

Browser

    <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?

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:

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!