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.

  data () {
    return {
      /* ... schema and model omitted ... */

      myValidation: {
        constraints: {
          name: {
            presence: true,
            length: {minimum: 3}
          },
          address: {
            presence: true,
            length: {maximum: 5}
          },
          subscribed: {}
        }
      },
    }