> 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/start-with.md).

# Start with

### Key Examples

Here is a [Playground with Key-Examples](https://wotamann.github.io/)

### GithubProject

Clone or download this Github-Project, change current directory to **./vuetify-form-base/example** and then run

`npm install`

`npm run serve`

### HTML-File

Download and open this [HTML-File](https://github.com/wotamann/vuetify-form-base/blob/master/dist/index-cdn.html) in your Browser

### Fiddle

Try a simple example with [Fiddle](https://jsfiddle.net/wotamann/204z6vpq/29/)

### Vue-File

In order for your application to work correct, you must wrap it in a [v-app](https://next.vuetifyjs.com/en-US/framework/default-markup) component. This component is required and can exist anywhere inside the body, but must be the parent of ALL Vuetify components. **v-main** needs to be a direct descendant of **v-app**.

```markup
// HTML
<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <v-form>
          
          <!-- vuetif-form-base component -->
          <v-form-base :model="Model" :schema="Schema" @input="handleInput"/>
        
        </v-form>
      </v-container>   
    </v-main>
  </v-app>
</template>
```

```javascript
// Javascript
import VFormBase from 'vuetify-form-base'
  
export default {    
  components:{ VFormBase },
  data () {
    return {
      Model: {
        name: 'Stoner',
        position: 'Admin',
        tasks: [
          { 
            done: true,
            title: 'make refactoring' 
          },
          { 
            done: false,
            title: 'write documentation'  
          },
          { 
            done: true,
            title: 'remove logs'  
          }        
        ]
      },
      Schema: {
        name: { type:'text', label:'Name' },
        position: { type:'text', label:'Position' },
        tasks: { 
            type: 'array',
            schema: { 
                done:{ type:'checkbox', label:'done', col:3}, 
                title:{ type:'text', col:9 }
            } 
        }
      }
    }
  },
  methods:{
    handleInput( ev ){
      console.log( ev ) 
    }
  }
}
```

and you will get this editable Form

![](/files/-MOWp4ftl0k7S1BFQdyj)