Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

Awesome Lists containing this project

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 :D

Advantages:
- 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 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]](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!