{"id":12438,"library":"vue-concurrency","title":"Vue Concurrency Manager","description":"vue-concurrency is a JavaScript library designed for encapsulating asynchronous operations and managing concurrency within Vue.js applications, leveraging the Composition API. Inspired by `ember-concurrency`, it provides a robust abstraction layer to reduce boilerplate associated with complex async flows. The current active version is `6.0.0-0` (a pre-release) which introduces features like global configuration and pruning, while the `5.x` series provides stable support for Vue 3.3+. Earlier versions (4.x) support Vue 2.7 and 3.2. Key differentiators include built-in TypeScript support, sophisticated async cancellation mechanisms via generator functions and the CAF library, and the ability to provide `AbortSignal` for native fetch/XHR abortion. It offers a reactive derived state (e.g., `isRunning`, `isIdle`, `isFinished`) for tracking operation status and powerful concurrency management strategies such as `drop()`, `restartable()`, and `enqueue()`. The library is actively maintained with regular updates and experimental SSR support.","status":"active","version":"6.0.0-0","language":"javascript","source_language":"en","source_url":"https://github.com/martinmalinda/vue-concurrency","tags":["javascript","vue","composition api","vuejs","generators","concurrency","task","async","hooks","typescript"],"install":[{"cmd":"npm install vue-concurrency","lang":"bash","label":"npm"},{"cmd":"yarn add vue-concurrency","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-concurrency","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue integration. Version 5.x requires Vue ^3.3, while 4.x supports Vue ^2.7 || ^3.2.","package":"vue","optional":false}],"imports":[{"note":"`useTask` is the primary Composition API hook for defining and managing tasks. CommonJS `require` syntax is generally incorrect for modern Vue 3 projects which primarily use ESM.","wrong":"const useTask = require('vue-concurrency')","symbol":"useTask","correct":"import { useTask } from 'vue-concurrency'"},{"note":"`TaskInstance` is a TypeScript type representing a single execution of a task. It should be imported as a type (`import type`) to ensure type-only import and avoid potential runtime issues or bundling bloat.","wrong":"import { TaskInstance } from 'vue-concurrency'","symbol":"TaskInstance","correct":"import type { TaskInstance } from 'vue-concurrency'"},{"note":"`Task` is a TypeScript type for the task definition itself. Like `TaskInstance`, it should be imported as a type. There is no default export for `Task` or other core utilities.","wrong":"import Task from 'vue-concurrency'","symbol":"Task","correct":"import type { Task } from 'vue-concurrency'"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport { useTask } from 'vue-concurrency';\n\nexport default defineComponent({\n setup() {\n const searchTerm = ref('');\n const searchResults = ref([]);\n const error = ref(null);\n\n // Define an asynchronous task for searching\n const searchTask = useTask(function* (term: string) {\n error.value = null;\n searchResults.value = [];\n if (!term) {\n return;\n }\n try {\n // Simulate an API call with a delay. `yield` makes it cancellable.\n yield new Promise(resolve => setTimeout(resolve, 500));\n\n // Simulate a potential network error\n if (Math.random() < 0.2) {\n throw new Error('Simulated network error!');\n }\n\n const results = Array.from({ length: 3 }, (_, i) => `${term} result ${i + 1}`);\n searchResults.value = results;\n } catch (e: any) {\n error.value = e.message;\n }\n }).drop(); // Concurrency strategy: if a new search starts, previous one is cancelled/dropped\n\n const onSearchInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n searchTerm.value = input.value;\n // Perform the task whenever the input changes\n searchTask.perform(input.value);\n };\n\n return {\n searchTerm,\n searchResults,\n error,\n searchTask,\n onSearchInput\n };\n },\n template: `\n
\n

Autocomplete Search

\n \n
Searching...
\n
Error: {{ error }}
\n
    \n
  • {{ result }}
    • \n
\n
Start typing to see results
\n
\n `\n});","lang":"typescript","description":"Demonstrates how to create an asynchronous task for an autocomplete search, manage its loading state (`isRunning`), and apply the `drop` concurrency strategy using Vue 3's Composition API and `vue-concurrency`."},"warnings":[{"fix":"Upgrade your Vue.js project to version 3.3 or later, or downgrade `vue-concurrency` to the `4.x` series.","message":"Version 5.x of `vue-concurrency` requires Vue 3.3 or newer. Applications using older Vue 3 versions (e.g., 3.0-3.2) or Vue 2.7 must remain on `vue-concurrency` v4.x.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"For Vue 2 projects, upgrade to Vue 2.7. If using an older Vue 2 version with `@vue/composition-api`, use `vue-concurrency` versions prior to `4.0.0`.","message":"Version 4.x introduced support for Vue 2.7 and 3.2, which required changes that deprecated earlier Vue 2 versions used with `@vue/composition-api`. For Vue 2 projects, only Vue 2.7 is officially supported by 4.x.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"For production applications requiring stability, consider using the latest stable `5.x` release. If you choose to use `6.0.0-0`, monitor release notes closely for any API changes before upgrading to future `6.x` versions.","message":"The currently provided version `6.0.0-0` is a pre-release (`-0` suffix). While it introduces new features like global configuration and pruning, its API might not be stable, and it may contain bugs or breaking changes in subsequent `6.x` pre-releases or the final `6.0.0` release. Using pre-releases in production is not recommended for stability.","severity":"gotcha","affected_versions":"6.0.0-0"},{"fix":"Always define `vue-concurrency` tasks using the `function*` syntax and use `yield` for asynchronous operations that should be cancellable. Example: `useTask(function* () { yield fetchData(); });`","message":"`vue-concurrency` leverages ES generator functions (`function*`) for automatic async cancellation. Defining tasks with plain `async`/`await` functions will prevent cancellation from working correctly, leading to potential resource leaks or unexpected behavior when concurrency strategies like `drop()` or `restartable()` are applied.","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"Replace `import { Task } from 'vue-concurrency'` with `import type { Task } from 'vue-concurrency'` for all type imports.","message":"When importing TypeScript types from `vue-concurrency` (e.g., `Task`, `TaskInstance`), it's best practice to use `import type { ... } from 'vue-concurrency'`. While `import { ... } from 'vue-concurrency'` might work in some build environments, `import type` explicitly signals a type-only import, preventing potential runtime errors or unnecessary bundle size increases.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Vue 2.7, ensure you are using `vue-concurrency` v4.x. For Vue 3, ensure you meet the peer dependency requirement (v5.x requires Vue 3.3+). Verify your `package.json` and installed Vue version match.","cause":"`vue-concurrency` is being used in a Vue 2 project without Vue 2.7, or with an incompatible version of `@vue/composition-api`, or an incorrect Vue 3 version.","error":"TypeError: Cannot read properties of undefined (reading 'setup') OR Error: [Vue warn]: Failed to resolve component: "},{"fix":"Specify a different concurrency strategy when defining your task, such as `.enqueue()`, `.restartable()`, or `.keepLatest()`, depending on your desired behavior for concurrent task executions. Example: `useTask(...).enqueue()`.","cause":"By default, `vue-concurrency` tasks have a `drop` concurrency strategy which prevents multiple instances of the same task from running simultaneously. Attempting to `perform()` a task that is already running will trigger this error.","error":"Error: [vue-concurrency] Task 'myTask' is already running. You attempted to perform 'myTask' but it is already running. If you want to run multiple tasks concurrently, use one of the concurrency strategies like 'enqueue' or 'restartable'."},{"fix":"Ensure your `tsconfig.json` `target` and `lib` settings are appropriate, and your bundler's Babel configuration includes the necessary plugins (e.g., `@babel/plugin-transform-regenerator`) or polyfills (`regenerator-runtime/runtime`) if targeting older environments.","cause":"Your build environment (Babel, TypeScript, Webpack, Vite) is not correctly configured to transpile ES generator functions (`function*`) for your target browser or Node.js environment, or `regenerator-runtime` is missing.","error":"SyntaxError: Unexpected token '*' OR ReferenceError: regeneratorRuntime is not defined"}],"ecosystem":"npm"}