> 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/schema/async-loading.md).

# Async Loading

### Lazy loading your  component

1. lazy import of 'vFormBase' component
2. asynchronous loading of the schema
3. asynchronous loading of the model values
4. asynchronous loading of the layout 

### Vue-File

```markup
<v-form-base 
    :model="myModel" 
    :schema="mySchema" 
    :col="myCol" 
/>
```

```javascript
<script>
  export default {
    name: 'AsyncLoad',
    components: {
      // # STEP 1) Lazy Loading of 'vFormBase' component here
      'VFormBase': () => import('@/components/vFormBase')
    },
    data () {
      return {
        myModel: {},
        mySchema: {},
        myCol:{}
      }
    },
    async mounted () {
      // # STEP 2) Async Loading of Schema
     this.mySchema = await this.delay({
       name: { type: 'text' },
       checkbox: { type: 'checkbox' }      
      }),
      // # STEP 3) Async Loading of Value
      this.myModel = await this.delay({
        name: 'Base',
        checkbox: true      
      })
      // # STEP 4) Async Loading of Grid
      this.myCol= await this.delay({
        cols:12, 
      })
    },
    methods: {
      delay (obj) { 
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve(obj), 1000)
        })
      }
    }
  }
</script>
```

### [Example](https://wotamann.github.io/async)