Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ctf0/vue-async-helper
https://forum.vuejs.org/t/global-config-for-async-components/40980
https://github.com/ctf0/vue-async-helper
Last synced: 26 days ago
JSON representation
https://forum.vuejs.org/t/global-config-for-async-components/40980
- Host: GitHub
- URL: https://github.com/ctf0/vue-async-helper
- Owner: ctf0
- License: mit
- Created: 2018-08-21T15:49:52.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:05:14.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T12:18:10.555Z (about 1 month ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/LinusBorg).
## Installation
```bash
npm install vue-async-helper --save
```
## Usage
- assign the function to the `window` so you can use it everywhere without re-importing
```js
import VAC from 'vue-async-helper'
window.VueAsyncComponent = VAC
```
- now replace the `() => import(...)` call with `VueAsyncComponent(import(...))`
```js
/* 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
```js
Vue.component('MyComp', VueAsyncComponent(import('abc.vue'), {
timeout: 1000
}))
```
- or globally
- first create a new file
```js
// 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
```js
// app.js
require('vac.js')
Vue.component('MyComp', VueAsyncComponent(import('abc.vue')))
```