vue-async-helper

Vue Async Helper

• based on : https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
• original post : https://forum.vuejs.org/t/global-config-for-async-components/40980

Big thanx to @LinusBorg.

Installation

npm install vue-async-helper --save

Usage

• assign the function to the window so you can use it everywhere without re-importing

  import VAC from 'vue-async-helper'
  window.VueAsyncComponent = VAC
  

• now replace the () => import(...) call with VueAsyncComponent(import(...))

  /* global */
  Vue.component('MyComp', () => import('abc.vue'))                // before
  Vue.component('MyComp', VueAsyncComponent(import('abc.vue')))   // after
  
  /* local */
  components: {
      MyComp: () => import('abc.vue')                // before
      MyComp: VueAsyncComponent(import('abc.vue'))   // after
  },
  

  prop	default	description
  loading	"Please Stand By..."	A component to use while the async component is loading
  error	"Something Went Wrong, Plz Try Again"	A component to use if the load fails
  delay	200	Delay before showing the loading component "in ms"
  timeout	5000	The error component will be displayed if a timeout is provided and exceeded "in ms"

Changing the helper defaults

• you can change the default options per call like

  Vue.component('MyComp', VueAsyncComponent(import('abc.vue'), {
      timeout: 1000
  }))
  

• or globally

  • first create a new file with the below

    // vac.js
    import VAC from 'vue-async-helper'
    window.VueAsyncComponent = (item) => {
        return VAC(item, {
            loading: LoadingComp,
            error: ErrorComp,
            delay: 500,
            timeout: 2000
        })
    }
    

  • next require that file and follow the usage as normal

    // app,js
    require('vac.js')
    
    Vue.component('MyComp', VueAsyncComponent(import('abc.vue')))