Bootstrap Themeable Vue.js Form Builder – vue-formation

Bootstrap Themeable Vue.js Form Builder – vue-formation

A Bootstrap themeable Vue.js form builder which allows to build complex reactive form layouts using JSON.

vue-formation

A Bootstrap themeable Vue.js form builder

Note: This project is still under initial development and provides limited support/documentation

Project Page

Bootstrap

Formation relies on Bootstrap.css for styling and it must be included in your project for formation to work properly. You may also use bootstrap themes like Bootswatch

Example

import { Formation } from 'vue-formation'
import 'bootstrap.css'
import 'bootstrap-theme.css' // optional

new Vue({
  el: '#app',
  components: { Formation },
  template: '<formation :data.sync="formData" :config="formConfig"></formation>',
  data: {
    formData: {
      firstName: '',
      lastName: ''
    },
    formConfig: {
      rows: [
        {
          columns: [
            {
              type: 'text',
              label: 'First Name',
              model: 'firstName'
            },
            {
              type: 'text',
              label: 'Last Name',
              model: 'lastName'
            }
          ]
        },
        {
          columns: [
            {
              type: 'button',
              text: 'OK',
              class: 'btn-primary',
              iconClass: 'glyphicon glyphicon-ok',
              onClick (event, vm) {
                vm.validate()
                console.log(vm.data)
              }
            }
          ]
        }
      ]
    }
  }
})

Github Repository

Tags: #VueJs