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

import { Promised } from 'vue-promised'

Vue.component('Promised', Promised)

<Promised :promise="promise">
  <!--
    Use the "pending" slot for loading content
  -->
  <h1 slot="pending">Loading</h1>
  <!-- The default scoped slots will be used as the result -->
  <h1 slot-scope="data">Success!</h1>
  <!-- The "rejected" scoped slot will be used if there is an error -->
  <h1 slot="rejected" slot-scope="error">Error: {{ error.message }}</h1>
</Promised>

<Promised :promise="promise">
  <pre slot="combined" slot-scope="{ isPending, isDelayOver, data, error }">
    pending: {{ isPending }}
    is delay over: {{ isDelayOver }}
    data: {{ data }}
    error: {{ error && error.message }}
  </pre>
</Promised>

<Promised :promise="searchResults" :pending-delay="200">
  <div slot="combined" slot-scope="{ isPending, isDelayOver, data, error }">
    <!-- data contains previous data or null when starting -->
    <Search :disabled-pagination="isPending || error" :items="data || []">
      <!-- The Search handles filtering logic with pagination -->
      <template slot-scope="{ results, query }">
        <ProfileCard v-for="user in results" :user="user"/>
      </template>
      <!-- If there is an error, data is null, therefore there are no results and we can display
      the error -->
      <MySpinner v-if="isPending && isDelayOver" slot="loading"/>
      <template slot="noResults">
        <p v-if="error" class="error">Error: {{ error.message }}</p>
        <p v-else class="info">No results for "{{ query }}"</p>
      </template>
    </Search>
  </div>
</Promised>