Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sethsandaru/vue-form-builder
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.
https://github.com/sethsandaru/vue-form-builder
demo drag-and-drop form form-builder vue vue-form-builder vuejs
Last synced: 4 days ago
JSON representation
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.
- Host: GitHub
- URL: https://github.com/sethsandaru/vue-form-builder
- Owner: sethsandaru
- License: mit
- Archived: true
- Created: 2018-09-01T04:48:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-13T07:11:08.000Z (6 months ago)
- Last Synced: 2024-10-29T05:48:43.185Z (11 days ago)
- Topics: demo, drag-and-drop, form, form-builder, vue, vue-form-builder, vuejs
- Language: Vue
- Homepage: http://vue-form-builder.sethphat.com
- Size: 9.21 MB
- Stars: 413
- Watchers: 24
- Forks: 129
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - sethsandaru/vue-form-builder - Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form. (vuejs)
README
# vue-form-builder
[![npm version](https://badge.fury.io/js/v-form-builder.svg)](https://www.npmjs.com/package/v-form-builder)
[![GitHub license](https://img.shields.io/github/license/sethsandaru/vue-form-builder.svg?style=flat-square)](https://github.com/sethsandaru/vue-form-builder/blob/master/LICENSE) ![img](https://img.shields.io/npm/dm/v-form-builder.svg)
[![img](https://img.shields.io/badge/documentation-full-green.svg?longCache=true&style=flat-square)](https://phattranminh96.gitbook.io/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 :DAdvantages:
- Less code in development (No need to do `....` 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](https://phattranminh96.gitbook.io/vue-form-builder/)
## Demo
- Demo Online: [Vue Form Builder ONLINE](https://vue-form-builder.herokuapp.com/)
- Demo Form (Real Life Example):
- [Vue Form Builder Real Life Example](http://vue-form-builder.sethphat.com/)
- Repo: https://github.com/sethsandaru/demo-vue-form-builder## Supported Browsers
![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | 6.1+ ✔ |## How to install?
### NPM / Yarn
```php
npm i v-form-builder --save
```### Browser
- Download the Latest [Release](https://github.com/sethsandaru/vue-form-builder/releases)
```html
```### CDN
#### jsDelivr
Latest version (@2.1.0)
```html
```
## 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](https://phattranminh96.gitbook.io/vue-form-builder/)
## How to implement for a beginner?
- [Turning Up The Form](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/turning-up-the-form)
- [Form Builder](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/form-builder-starter)
- [Form Renderer](https://phattranminh96.gitbook.io/vue-form-builder/getting-started/form-renderer-starter)### Usage / Use-cases
[Some of the use-cases I mentioned](https://phattranminh96.gitbook.io/vue-form-builder/use-cases)
### APIs / Extending / Hard-core stuff
[Visit Documentation](https://phattranminh96.gitbook.io/vue-form-builder/extending/plugin-options)
## 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](./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 BuilderThen 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]](mailto:[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](http://sethphat.com) aka Phat Tran!