/ Promises

Easily manipulate Promises and their state in Vue

Easily manipulate Promises and their state in Vue


Promises using vue composition api.

Easily manipulate Promises and their state in Vue.


npm install vue-compose-promise


    <span> Is the promise still pending: {{ usersPromise.isPending }} </span>
    <span> Is the 200ms delay over: {{ usersPromise.isDelayOver }} </span>
      Last succesfully resolved data from the promise: {{ usersPromise.data }}
    <span> Error if current promise failed: {{ usersPromise.error }} </span>

import { createComponent } from '@vue/composition-api'
import { usePromise } from 'vue-compose-promise'

export default createComponent({
  setup() {
    const promised = usePromise({ pendingDelay: 200, promise: fetchUsers() })

    return {
      usersPromise: promised.state,

      fetchUsers() {
        promised.state.promise = fetchUsers()

Both, pendingDelay and promise can be reactive values like a computed property, a ref or a prop:

const search = ref('')
const usersPromise = computed(() => featchUsers(search.value))
const promised = usePromise({
  pendingDelay: props.displayLoaderDelay,
  promise: usersPromise,


usePromise<T>(options?: { pendingDelay?: number | Ref<number>; promise?: Promise<T> | Ref<Promise<T>> })

  • options
    • pendingDelay: amount of time in ms that should be wait whenever the a new promise is pending. This allows delaying the display of a loader to avoid flashing the screen. Can be a reactive property.
    • promise: initial promise. Can be null. Can be a reactive property.