> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/master.md).

# 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.

```javascript
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.

```javascript
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

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

and you will get a full editable and working Form.

![](/files/-MOWYPuuofTLy6XCCJAJ)

### 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.&#x20;

Furthermore if you don't define a Schema, then **Vuetify-Form-Base** tries to [autogenerate a schema](https://wotamann.github.io/autogenerate) 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](https://vuetifyjs.com/) 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](https://vuetifyjs.com/en/components/grids/).