GitHub - byteboomers/vue-prom: Vue promise wrapper component (original) (raw)
vue-prom
Vue promise wrapper component
About
The goal of this component is to simplify rendering logic based on promise state (pending / fulfilled, rejected). The component keeps track of the promise's state and proposes slots to render content accordingly.
You should avoid this component when:
- You need to store the result of the promise (i.e to send it back later or if it is required for a computed property).
- You need to make a function call inside of the promise callback (i.e store the result in Vuex or trigger your notification library).
Installation
NPM
npm install --save vue-prom
CDN
Usage
With vue-prom we would write the following:
Loading user...
Hello {{ result.firstName }} {{ result.lastName }}
{{ error.message }}
Instead of:
Loading user...
{{ error.message }}
Hello {{ result.firstName }} {{ result.lastName }}
Alternatively, to keep the template concise, we can omit the 'pending' and 'catch' slots altogether and rely on the default labels provided by the component instead.
Hello {{ result.firstName }} {{ result.lastName }}
Props
- promise: required, the promise to resolve.
- refresh: refresh trigger.
The component watches both the promise and refresh props, the promise will automatically re-execute when the value of either of these changes.
Slots
All slots are optional.
| Name | Visible when | Slot type(s) | If absent |
|---|---|---|---|
| pending | The promise is pending | Regular only | A span with 'Loading...' |
| catch | The promise was rejected | Regular and scoped | A span with 'Error' |
| then | The promise was fulfilled | Regular and scoped | A span with 'Loaded' |
Data exposed by scoped slots:
- Scoped 'catch' slot exposes the 'error' object.
- Scoped 'then' slot exposes the 'result' object.