Introduction
Why Vuetify-Form-Base?
It is a model-based form generator. The goal of this project is to provide a tool to generate an editable form from any model data with less effort, even if the model is a deeply nested object. Vuetify-Form-Base works as a Vue component and can be easily 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,
todo: 'make refactoring'
},
{
done: false,
todo: 'write documentation'
},
{
done: true,
todo: 'remove logs'
}
]
}
Usually you have to flatten the data structure and map everything to a suitable format. Then you have to define an HTML form, work hard on your layout, implement some logic and then animate it with your data. Vuetify Form-Base does 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' },
todo:{ 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
Was this helpful?