Composable Promise Component – Vue Promised

A Vue component that uses composable promises as a component.

How to use it:

1. Import the Vue Promised.

import { Promised, usePromise } from 'vue-promised'

Vue.component('Promised', Promised)
export default {
  setup() {
    const usersPromise = ref(fetchUsers())
    const promised = usePromise(usersPromise)
    return {
      ...promised
    }
  },
}

2. Basic usage.

<template>
  <Promised :promise="usersPromise">
    <!-- Use the "pending" slot to display a loading message -->
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <!-- The default scoped slot will be used as the result -->
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <!-- The "rejected" scoped slot will be used if there is an error -->
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

Preview:

Changelog:

v2.1.0 (06/08/2021)

• Update vue-demi

Download Details:

Author: posva

Live Demo: https://vue-promised.esm.dev/

Download Link: https://github.com/posva/vue-promised/archive/v2.zip

Official Website: https://github.com/posva/vue-promised

Install & Download:

# Yarn
$ yarn add vue-promised

# NPM
$ npm i vue-promised