Schema-based form builder for Vue.js 2+, based on Vuetify. Normally you have to flatten the data structure and set it all to an appropriate format. Then you have to define the HTML form and animate it with your data.

vue form generator example, json schema form generator, vue form builder drag and drop, vue form generator custom field, vuetify form generator, vuetify form base

A jQuery Plugin for Drag and Drop Form Builder or Creation

How to make use of it:

Imagine you are getting the data as a JS-Object and you have to create an editable form.

Model: {
    name: 'Stoner',
    position: 'Admin',
    tasks: [
        { 
          done: true,
          title: 'make refactoring' 
        },
        { 
          done: false,
          title: 'write documentation'  
        },
        { 
          done: true,
          title: 'remove logs'  
        }        
    ]        
}

Using Vuetify-Form-Base, create a schema object with the same structure as your data.

Schema: {
    name: { type:'text', label:'Name' },
    position: { type:'text', label:'Position' },
    tasks: { 
        type: 'array',
        schema: { 
            done:{ type:'checkbox', label:'done', col:3}, 
            title:{ type:'text', col:9 }
        } 
    }
}  

Schema-based Form Generator, Vuetify-Form-Base Plugin/Github, vue form generator documentation, vue form generator styling

See Demo And Download

Official Website(wotamann): Click Here

This superior jQuery/javascript plugin is developed by wotamann. For extra Advanced usage, please go to the official website.