Nagging Penguin Matriarchs

    vue-formation

    0.1.5 • Public • Published

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

    Install

    npm i vue-formation

    DownloadsWeekly Downloads

    2

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • vbranden