Basic asynchronous component import in Vue single file component

async-component-basic-usage.vue

<template>
  <div>
    <button v-on:click="showChild = !showChild">Toggle Child Component!</button>
    <child-component v-if="showChild" message="I am the child component."></child-component>
  </div>
</template>

<script>
import LoadingState from '@/components/LoadingState'
import ErrorState from '@/components/ErrorState'

export default {
  name: 'ParentComponent',
  
  components: {
    LoadingState,
    ErrorState,
    ChildComponent: () => ({
      // the component we want to lazy load
      component: import('@/components/ChildComponent'),
      // the component to show if our ChildComponent is taking some time to load
      loading: LoadingState,
      // the component to show if ChildComponent fails to load
      error: ErrorState,
      // the time to wait before showing LoadingState
      delay: 200,
      // the time to wait before we give up and show ErrorState
      timeout: 1500
    })
  },
  
  data(){
    return {
      showChild: false
    }
  }
}
</script>