Skip to content

useWebWorkerFn

Category
Export Size
888 B
Last Changed
last month
Related

Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of alewin/useWorker.

Demo

Current Time: 2025-07-31 20:53:34 877

This is a demo showing sort for large array (5 million numbers) with or w/o WebWorker.
Clock stops when UI blocking happens.

Usage

Basic example

ts
import { 
useWebWorkerFn
} from '@vueuse/core'
const {
workerFn
} =
useWebWorkerFn
(() => {
// some heavy works to do in web worker })

With dependencies

ts
import { 
useWebWorkerFn
} from '@vueuse/core'
const {
workerFn
,
workerStatus
,
workerTerminate
} =
useWebWorkerFn
(
dates
=>
dates
.sort(dateFns.compareAsc),
{
timeout
: 50000,
dependencies
: [
'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns ], }, )

With local dependencies

ts
import { 
useWebWorkerFn
} from '@vueuse/core'
const
pow
= (
a
: number) =>
a
*
a
const {
workerFn
,
workerStatus
,
workerTerminate
} =
useWebWorkerFn
(
numbers
=>
pow
(
numbers
),
{
timeout
: 50000,
localDependencies
: [
pow
]
}, )
js
import { useWebWorkerFn } from '@vueuse/core'
const pow = (a) => a * a
const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  (numbers) => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow],
  },
)

Web Worker

Before you start using this function, we suggest you read the Web Worker documentation.

Credit

This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of @Donskelle to migration.

Type Declarations

Show Type Declarations
ts
export type 
WebWorkerStatus
=
| "PENDING" | "SUCCESS" | "RUNNING" | "ERROR" | "TIMEOUT_EXPIRED" export interface UseWebWorkerOptions extends ConfigurableWindow { /** * Number of milliseconds before killing the worker * * @default undefined */
timeout
?: number
/** * An array that contains the external dependencies needed to run the worker */
dependencies
?: string[]
/** * An array that contains the local dependencies needed to run the worker */
localDependencies
?: Function[]
} /** * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise. * * @see https://vueuse.org/useWebWorkerFn * @param fn * @param options */ export declare function
useWebWorkerFn
<
T
extends (...
fnArgs
: any[]) => any>(
fn
:
T
,
options
?: UseWebWorkerOptions,
): {
workerFn
: (...
fnArgs
:
Parameters
<
T
>) =>
Promise
<
ReturnType
<
T
>>
workerStatus
:
ShallowRef
<
WebWorkerStatus
,
WebWorkerStatus
>
workerTerminate
: (
status
?:
WebWorkerStatus
) => void
} export type
UseWebWorkerFnReturn
=
ReturnType
<typeof
useWebWorkerFn
>

Source

SourceDemoDocs

Contributors

Anthony Fu
Fabian
Anthony Fu
IlyaL
wheat
sibbng
Antério Vieira
SerKo
thefeymesaleng
Luvoy
Hawtim
烽宁
Jelf
不见月
Shinigami
Alex Kozack
Richard Musiol

Changelog

v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.10.0 on
f4028 - feat: support local function dependencies (#3899)
v10.7.0 on
fccf2 - feat: upgrade deps (#3614)
v10.4.0 on
34206 - fix(useWebWorker): prevent error event bubbling (#3141)

Released under the MIT License.

AI-Driven Development
You. But 10x faster
The structured masterclass to help you leverage AI and build with an edge
Join Early