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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wotamann.gitbook.io/vuetify-form-base/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.