Vue form builder (HTML)

I highly recommend to use this component in conjunction with @spicycoding/vue-form-parser

Quick install

NPM:

npm install @spicycoding/vue-form-builder

Yarn

yarn add @spicycoding/vue-form-builder

Documentation

Add this at the top of your javascript file

import FormBuilder from '@spicycoding/vue-form-builder';

Now add it to the components object of your Vue instance.

components: { 'form-builder': FormBuilder },

You can put the component in your HTML like this

<form-builder :json="" :on-submit="" :elements-only="true"></form-builder>

On submit

In your own javascript, create a function that you refer to in the form-builder component. For example:

function apply(json) {
    console.log(json);
    
    /*
     *  Note:
     *  
     *  This json can be used in your component property (:json="json")
     *  so that the form settings are already loaded when the vue component is created.
     *  
     *  So you should definitely save this json in your database so you can edit the form afterwards!
     */
}

Did you create the function as shown in the example above? Then you can use this in the component:

<form-builder :json="" :on-submit="apply" :elements-only="true"></form-builder>

Elements only

This property can be used to enable/disable editing the form attributes. In some cases you might want to use a dynamic form action (for example). In this case, you can set elements-only to true to make sure that the form attributes are not editable.

Json

The json object that your apply method returns can be used to send in the :json attribute. This way, you can edit a previously created form.

SortableJS

This package makes use of the sortablejs package. All the credits for the author of this package!

Thank you for using this Form Builder!

Kind regards, Pim vd Molen (Spicy Coding)