Task

useTask() Accepts a Generator functions and returns a Task<T, U[]> where T is the return value of the generator and U is the type of parameters.

import { useTask } from "vue-concurrency";

/* ... */

const getProgressTask = useTask(function*() {
  const number = yield ajax("/api/progress");
  return number * 100;
});

perform()

(...params: U) => TaskInstance<T>

Performs the task and returns a new task instance.

import { useTask } from "vue-concurrency";

const task = useTask(function*(signal, a, b) {
  /* ... */
});
const taskInstance = task.perform(1, 2);

cancelAll()

() => void

Cancels all running or enqueued instances.

task.cancelAll();

clear()

() => void

Cancels all running or enqueued instances and clears the instance stack to reset the task to initial state.

task.cancelAll();

performCount number

Return the number of times the task was performed.

isRunning

boolean

Returns true if there's at least one running instance.

<template>
  <div v-if="task.isRunning">Loading...</div>
</template>

isIdle

boolean

Task is idle if there's no running instance.

isError

boolean

Task isError if the last instance has error.

last

TaskInstance<T> | undefined

Returns the last task instance if there's any.

lastSuccessful

TaskInstance<T> | undefined

Returns the last task successful instance if there's any.

drop()

Task<T, U>

Set's the concurrency policy to drop and returns itself.

enqueue()

Task<T, U>

Set's the concurrency policy to enqueue and returns itself.

restartable()

Task<T, U>

Set's the concurrency policy to restartable and returns itself.

keepLatest()

Task<T, U>

Set's the concurrency policy to keepLatest and returns itself.

maxConcurrency()

Task<T, U>

Set's the max concurrency and returns itself.

Task Options

You can configure default task behavior by passing options to useTask():

import { useTask } from "vue-concurrency";

const task = useTask(function*() {
  // ...
}, {
  cancelOnUnmount: true,  // default: true
  pruneHistory: true,     // default: true
  keepSuccessful: 2,      // default: 2
  maxInstances: 50,       // default: 50
  pruneDelayMs: 1000,     // default: 1000
});

App-wide task defaults (SSR-safe)

If you use Nuxt/SSR or have multiple Vue apps, prefer app-scoped defaults via the config plugin:

import { VueConcurrencyConfig } from "vue-concurrency/config";

app.use(VueConcurrencyConfig, {
  taskDefaults: {
    maxInstances: 20,
    pruneDelayMs: 250,
  },
});

Per-task options override app defaults:

useTask(cb, { maxInstances: 5 }); // overrides to 5

Nuxt example

plugins/vue-concurrency.ts:

import { defineNuxtPlugin } from "#app";
import { VueConcurrencyConfig } from "vue-concurrency/config";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueConcurrencyConfig, {
    taskDefaults: {
      pruneHistory: true,
      keepSuccessful: 2,
      maxInstances: 20,
      pruneDelayMs: 250,
    },
  });
});