1.0.0 • Published 6 years ago
vue-async-helper v1.0.0
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-importingimport VAC from 'vue-async-helper' window.VueAsyncComponent = VAC
now replace the
() => import(...)
call withVueAsyncComponent(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')))
1.0.0
6 years ago