vue-form-builder

Form builder library using VueJS 2 Virtual Dom

Features

This is still currently in development as an early build.

Build a full form using a JavaScript object. No fiddling with HTML
Supports multiple output templates like bootstrap,
Extremely flexible, add new components or modify existing ones with ease
Pluggable validation. The validate.js library is supported by default.

Usage

npm install --save vue-form-builder

In your main file

import VueFormBuilder from 'vue-form-builder';
import Vue from 'vue';

Vue.use (VueFormBuilder);

In your JS:

new Vue({
  data: {
      myFormOptions: {
        name: "My Form",
        template: "bootstrap3"
      },
      myModel: {
        name: "Bobby Tables",
        address: ""
      },
      myFormSchema: [
        {key: 'name', label: "Name", type: "text"},
        {key: 'address', label: "Address", type: "textarea"},
      ]
    }
  }
})

In your template:

    <vue-form 
      :schema="myFormSchema"
      :options="myFormOptions"
      :model.sync="myModel"
      @submit="onFormSubmitted"
      id="myCoolForm" />

Custom components

You can easily add a custom component like this:

// Import the form registry
import { FormRegistry } from 'vue-form-builder';

// Register the component
FormRegistry.registerCustomComponent('bootstrap', // template name
  'switch', // key
  function (h, field, value, onUpdate) {
    var changeValue = () => {
      // Set the new value to the reverse of current value
      onUpdate (!value);
    };

    return <div>
      {field.label}: <a href="#" on-click={changeValue}>{value ? "On" : "Off"}</a>
    </div>;
  });

In your schema:

    myFormSchema: [
      {key: 'name', label: "Name", type: "text"},
      {key: 'address', label: "Address", type: "textarea"},
      {key: 'subscribed', label: "Subscribed", type: "switch"},
    ]

Validation

Add a validation attribute to the

  <vue-form 
    :schema="myFormSchema"
    :options="myFormOptions"
    :model.sync="myModel"
    @submit="onFormSubmitted"
    :validation="myValidation"
    id="myCoolForm" />

In your data, you can set the constraints object. The keys should match the ones in your model/schema. This is powered by validate.js and you can read the documentation of the constraints for more advanced validiation.