> 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/quickstart-1/intro.md).

# Intro

### Model - Schema

**vuetify-form-base** comes as a singular File, is a [Vue Component](https://vuejs.org/v2/guide/components.html) and can be integrated into any Vue Project.

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

![](/files/-MOXFM9kVR1El79-YjVE)

The corresponding Schema-Object defines Type, Layout and Functional behaviour of the Vuetify-Controls in your Form. The [Component Framework Vuetify 2.0](https://vuetifyjs.com/) 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**](/vuetify-form-base/schema/css.md)

### Model

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

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

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

```

### Schema - Definition

![](/files/-MOWYPuuofTLy6XCCJAJ)

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

###