vue-form-json

Generate a responsive vue form with validation and bulma style, from json

All fields are required and input text by default. They can have pre filled values.
Once submitted an event 'formSubmitted' is emitted on $root with the formName and all values.
Enjoy

Install

yarn add vue-form-json vee-validate bulma @fortawesome/fontawesome-free
#fontawesome is not needed if hasIcon props is false

Usage

// main.js
import VeeValidate from 'vee-validate'
// ...
Vue.use(VeeValidate)
// ...

<template lang="pug">
  #app.section
    form-json(:formFields="jsonFields",
              :formName="'userProfil'")
</template>

<script>
  import formJson from 'vue-form-json'
  import jsonFields from './../assets/fields'

  export default {
    name: 'app',
    components: {
      formJson
    },
    data: () => ({
      jsonFields
    }),
    mounted () {
      this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
    }
  }
</script>

<style lang="stylus">
  @require '../node_modules/bulma/css/bulma.min.css'
  @require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
  @require '../node_modules/vue-form-json/dist/vue-form-json.css'
</style>

Props available on formJson component

props: {
  formFields: {
    type: Array,
    required: true
  },
  formName: {
    type: String,
    required: true
  },
  mandatoryAsteriskLegend: {
    type: String,
    default: '* field required'
  },
  btnSubmitText: {
    type: String,
    default: 'Submit'
  },
  btnResetText: {
    type: String,
    default: 'Reset'
  },
  resetFormAfterSubmit: {
    type: Boolean,
    default: false
  },
  defaultMinLength: {
    type: [Boolean, Number],
    default: false
  },
  defaultMaxLength: {
    type: [Boolean, Number],
    default: false
  },
  defaultMin: {
    type: [Boolean, Number],
    default: 0
  },
  defaultMax: {
    type: [Boolean, Number],
    default: false
  },
  hasIcon: {
    type: Boolean,
    default: true
  }
}