vue-promised

Transform your Promises into components

Installation

npm install --save vue-promised
# or
yarn add vue-promised

Usage

Import the component to use it

import Promised from 'vue-promised'

Vue.component('Promised', Promised)

promise should be a Promise. data will contain the result of the promise. You can of course name it the way you want:

<Promised :promise="promise">
  <!--
    Use the default slot for loading content
    Make sure to have ONLY 1 NODE
    (you can always nest things inside of a div
  -->
  <h1 slot="pending">Loading</h1>
  <!-- The default scoped slots will be used as the result -->
  <h1 slot="then" slot-scope="data">Success!</h1>
  <!-- The 'catch' named scoped slots will be used if there is an error -->
  <h1 slot="catch" slot-scope="error">Error: {{ error.message }}</h1>
</Promised>

You can omit the pending and then names, VuePromised will pick them up automatically, resulting in a more concise writing:

<Promised :promise="promise">
  <h1>Loading</h1>
  <h1 slot-scope="data">Success!</h1>
  <h1 slot="catch" slot-scope="error">Error: {{ error.message }}</h1>
</Promised>

You can also pass an array of Promises with the prop promises but keep in mind the order is not maintained for the resolved items:

<Promised :promises="promises">
  <h2>Wating for first result</h2>
  <h2 slot-scope="items">
    Succeeded {{ items.length }} times
  </h2>
  <h2 slot="catch" slot-scope="errors">
    Failed {{ errors.length }} promises
  </h2>
</Promised>

API Reference

Promised component

Promised will watch its prop promise and change its state accordingly.

props

Name	Description	Type
promise	Promise to be resolved	Promise
promises	Array of Promises to be resolved	Promise

slots

pending and then slots are provided in case you prefer a more explicit approach.

Name	Description	Scope
default	Content to display while the promise is pending	—
default	Content to display once the promise has been successfully resolved	data: resolved value
catch	Content to display if the promise is rejected	error: rejection reason
pending	Same as non scoped default	—
then	Same as scoped default	data: resolved value

License

MIT