Intro

Model - Schema

vuetify-form-base comes as a singular File, is a Vue Component and can be integrated into any Vue Project.

<v-form-base :model="myModel" :schema="mySchema" @input="handleInput" />

Schema can have an ident Structure as Model. Create a Schema by copying the Model-Object and replace the Values of the Model-Object by Definitions for your your Schema.

The corresponding Schema-Object defines Type, Layout and Functional behaviour of the Vuetify-Controls in your Form. The Component Framework Vuetify 2.0 styles your Form. The Controls have a clear design, but don't worry if you need more you can change Style and Layout. For more Details see Section CSS

Model

Model can be any Object, which could be nested and can contain Arrays

Model: {
    name: 'base',
    details: {
        one: ['a','b','c'],
        two: { 
            a:true, 
            b:false 
        }
    }
}

Schema: {
    name:'text',
    details: { 
        one:{ type:'array' },
        two: { 
            a:'checkbox'  // shorthand for { type:'checkbox', label:'a']
            b:'checkbox'  // shorthand for { type:'checkbox', label:'b']
        }
    }
}

Schema - Shorthand Definition

Model:{
    name:'Base'
}
...
Schema{
    name:'text'  
    // shorthand for 
    // name:{ type:'text', label:'name' }
}

Schema - Definition

Based on an existing Model vuetify-form-base generates a full editable Form using defined Schema. Layout and Functionality are defined in a Schema-Object, which has the same Property structure as the Model-Object. Your Data-Object keeps full reactive and any Input or Change in your Form triggers an Event too.

If you have a deep nested Model-Object including any Array-Structure you can direct work on it. There is no need to flatten or modify your Data Presentation.

Changing any Field in the Form gives you a reactive Result in your Model-Object. Furthermore you can synchronize two or more Forms by using same Model-Object.

If you want a Partial-Form which displays only parts of your Data.Object, then link a property of your Model-Object to your vuetify-form-base Component.

And if necessary you can also build a Form in Form by using Slots.