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')))