Current Time: 2021-01-14 18:35:07 572

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


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


Basic example

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // some heavy works to do in web worker

With dependencies


import { useWebWorkerFn } from '@vueuse/core'

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  dates => dates.sort(dateFns.compareAsc), 
    timeout: 50000, // 5 seconds
    dependencies: [
      '' // dateFns

Web Worker

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



fnFunctionThe pure function to run with web workers
optionsObjectThe object containing the options of the worker


timeoutNumberundefinedthe number of milliseconds before killing the worker
dependenciesArray of String[]an array that contains the external dependencies needed to run the worker

Return Value

workerFnPromiseThe function that allows you to run fn with web worker
workerStatusWebWorkerStatusThe status of workerFn
workerTerminateFunctionThe function that kills the worker


This function is a Vue port of by Alessio Koci, with the help of @Donskelle to migration.

Type Declarations

export declare type WebWorkerStatus =
  | "ERROR"
export interface WebWorkerOptions extends ConfigurableWindow {
  timeout?: number
  dependencies?: string[]
 * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
 * @see   {@link /useWebWorkerFn}
 * @param fn
 * @param options
export declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(
  fn: T,
  { dependencies, timeout, window }?: WebWorkerOptions
) => {
  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
  workerStatus: Ref<WebWorkerStatus>
  workerTerminate: (status?: WebWorkerStatus) => void