README.md

vue-form-json

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

All fields are required and input text by default. Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.

Key Features

• Generate a form from json / array (formFields props)
• Bulma style
• Responsive
• Fields on multiples columns

  const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]

• Pre filled values

  const formFields = [{ label: 'the label', value: 'the value' }]

• Validation & VeeValidate simple rules validation

  const formFields = [{ label: 'the label', validation: { is_not: 'label' } }]

• Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)

  const formFields = [{
    label: 'the label',
    attr: { class: 'classOnInput' },
    field: { attr: { class: 'classOnFieldClassName' } }
  }]

• Named slot everywhere inside form

  const formFields = [{ slot: 'nameOfTheSlot' }]

• Html directly inside json (formFields props)

  const formFields = [{ html: '<p>Your html content</p>' }]

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'")
      div(slot="slotNameAddedInJsonFields")
        p Your slot content
</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
  }
}