Form-generator-vue NPM

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-formbodyrow"
    - col - "fgv-formbodyrow__col <model>"
- footer - "fgv-form__footer"