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: about 1 month 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 (over 6 years ago)
Default Branch: master
Last Pushed: 2024-05-13T07:11:08.000Z (7 months ago)
Last Synced: 2024-10-29T05:48:43.185Z (about 2 months 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 :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!