Introduction

Why Vuetify-Form-Base?

It is a Model based Form-Generator. The Goal of this Project is to provide a Tool to generate with less Effort an editable Form from any Model-Data, even if the Model is a deep nested Object. Vuetify-Form-Base works as Vue Component and can easily be integrated into any Vue Project.

Start with Model

Imagine you get this Model as 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'  
        }        
    ]       
}

Normally you have to flatten the Data-Structure and map all to an appropriate Format. Then you have to define a HTML-Form, work hard on your Layout, implement any Logic and then animate it with your Data. Vuetify-Form-Base will do this job for you.

Create a Schema Object

All you need to create your Form and work with it is a Schema, which is created based on your Model Structure.

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

Use Component

Now insert the Vuetify-Form-Base Component in your Code

	<v-form-base :model="Model" :schema="Schema" @input="handleEvents" />

and you will get a full editable and working Form.

Summary

If you have to generate Forms or you have to edit Data presented as JSON- or JS-Objects, then take a closer look at Vuetify-Form-Base and try it. It can make your work much easier and save your time.

Furthermore if you don't define a Schema, then Vuetify-Form-Base tries to autogenerate a schema automatically. But this is working only if your Model Values are of Type 'string', 'number' or 'bool'.

Vuetify-Form-Base uses the well known and excellent Component Framework Vuetify 2.0 to style and layout your Form. Vuetify Controls have a clear, minimalistic Design and support responsive Behavior. If necessary add specific layouts by using the implemented Vuetify Grid System.

Last updated