🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Bootstrap themeable Vue.js form builder. Build complex reactive form layouts using JSON.

Form

Documentation

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)               }             }           ]         }       ]     }   } })

You May Also Like