Vue Form Builder

Vue Form Builder of @sethsandaru - Main documentation page for version @2.0.0+

What is Vue Form Builder? What I can use it for?

Well, the name itself said it all. Vue Form Builder is a component/library to help you to create your own Form by only doing stuff as easy as it seems to be: click, drag, drop,... blah blah blah. And then, boom, finally, you got your own form without coding anything.

Vue Form Builder proudly built from the top of Vue and using many of Vue's best practices and 1000% got rid of JQuery. Pretty cool, isn't it?

Main Advantages

  • Less code in development

  • Simple and Super Friendly UI/UX to help you build your OWN FORM.

  • Easy to:

    • Create / Design your Form

    • Update: just jump in and change your own form like a shadow.

    • Maintain your own form without depression.

    • Extend: Support a wide API/Hook/Events to let you extend the Form by your need.

  • (Coming soon) Multilingual support

  • ...

Online Demo

Form Builder / Renderer (End-user view): https://vue-form-builder.herokuapp.com/

Real-life Example Demo: http://vue-form-builder.sethphat.com/

Preview - Form Builder

Preview - Form Renderer / FormGUI

Dependencies

I'm taking this extremely serious. Because one dependency might cost Vue Form Builder 5~50KB for the final bundle. The risk is too high since we can't do the async import (because Vue Form Builder also need to support browser inline script)

  1. VueJS 2+

  2. deep-equal - for checking the form configuration

  3. vue-draggable - for drag n' drop

  4. lightpicker - Lightweight & super flexible date-picker

  5. DayJS - minimal version of moment (~2KB)

  6. vue-upload-component - Lightweight Uploader Component (~15KB)

On the other hand, in a real-life SPA (your own applications). You can import VueFormBuider asynchronously without any issues! (That would help you decrease the final bundle a lot and also a good practice too)

NextUse Cases

Last updated