form-generator-vue

Create beautiful forms using any component library for vue. ## Features * reactive schema based form. * compatible with third party component libraries like vuetify, element etc and custom components. * customizable form layout. ## [Demo](https://divijbha

Usage no npm install needed!

<script type="module">
  import formGeneratorVue from 'https://cdn.skypack.dev/form-generator-vue';
</script>

README

Create beautiful forms using any component library for vue.

Features

  • reactive schema based form.
  • compatible with third party component libraries like vuetify, element etc and custom components.
  • customizable form layout.

Demo

Installation

npm install form-generator-vue

How to use

<template>
    <form-generator-vue 
        v-model="fields"
        :components="formComponents"
        :schema="schema"
        :on-submit="handleSubmit"
    >
        <template v-slot:footer>
            <button type="submit">submit</button>
        </template>
    </form-generator-vue>
</template>

<script>
import FormGeneratorVue from 'form-generator-vue';
export default {
    data() {
        return {
            fields: {}
        }
    },
    components: {
        FormGeneratorVue
    },
    computed: {
        formComponents: () => [
            {   
                name: 'v-text-field', //should be a globally registered component.
                type: ['text', 'password', 'email', 'number'],
                errorProp: 'errorMessages'
            },
            {   
                name: 'v-radio-group',
                type: ['radio']
            }
        ],
        schema() {
          return {
            fields: [
              {
                model: 'email',
                type: 'email'
              },
              {
                model: 'mobile',
                type: 'number'
              },
              {
                model: 'password',
                type: 'password'
              }
            ]
          }
        }
    },
    methods: {
        async handleSubmit() {
            // await network call ---------;
            console.log('form submitted', this.fields)
        }
    }
}
</script>

Props

props type description
schema obj json schema to create form
components obj component map to render component for specific type of field
onSubmit async/sync function submit success function
onSubmitFail async/sync function submit fail function.
disabled Bool toggle disable all fields
activeValidation bool toggle validation on input for all fields. Default is false
activeValidationDelay Number debounced validation for all fields
logs bool toggle validation and submit logs
classes obj To add classes to all the rows and columns inside form body

field schema Options

options type default purpose
model String v-model with component.
type String 'text' Input type. Component for it is loaded from components.
props obj {} Component props
hide bool/() => bool false show/hide field. Not required when hidden
v-on obj {} Assigned to component v-on.
validator () => //return error data function returning error data(string, array etc) on validation fail.
component String for using any component
errorProp String 'errorMessages' name of error prop consumed by component to show error
activeValidation Boolean false toggle validation on input
activeValidationDelay Number 0 debounced validation

Layout

Row is a div containing column div containing the component. A row can have multiple cols. Nested rows are not supported.

fields: [   // 1 row 1 column -------
            {
                model: 'name',
                type: 'text'
            },
            // 1 row 1 column -------
            {
                model: 'email',
                type: 'email'
            },
            
            // 1 row 2 columns -------   
            [
                {
                    model: 'mobile',
                    type: 'number'
                },
                {
                    model: 'password',
                    type: 'password'
                }  
            ]
        ]

Slots

  • header
  • before-row
  • after-row`
  • before-col
  • after-col
  • <model> (for using the component slot)
  • before-<model>
  • after-<model>
  • footer

slot prop model is passed to all slots except for slots header and footer.

classes used

  • form - "fgv-form"
    • header - "fgv-form__header"
    • body - "fgv-form__body"
      • row - "fgv-form__body__row"
        • col - "fgv-form__body__row__col <model>"
    • footer - "fgv-form__footer"

Contributors

This project exists thanks to all the people who contribute. Contribute.

Changelog