Generate a vue form with validation and bulma style from json

Generate a vue form with validation and bulma style from json

All fields are required and input text by default. They can have pre filled values.

NPM Version Build Status Test Coverage Maintainability semantic-release

vue-form-json

Edit vue-form-json-demo

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

  • [x] Generate a form from json / array (formFields props)
  • [x] Bulma style
  • [x] Responsive
  • [x] Fields on multiples columns
    const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]
    
  • [x] Pre filled values
    const formFields = [{ label: 'the label', value: 'the value' }]
    
  • [x] Validation & VeeValidate simple rules validation
    const formFields = [{ label: 'the label', validation: { is_not: 'label' } }]
    
  • [x] Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)
    const formFields = [{
      label: 'the label',
      attr: { class: 'classOnInput' },
      field: { attr: { class: 'classOnFieldClassName' } }
    }]
    
  • [x] Named slot everywhere inside form
    const formFields = [{ slot: 'nameOfTheSlot' }]
    
  • [x] 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
  }
}

Github Repository

Tags: #VueJs #Form