Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.4 KiB

Raw Blame History

category
Browser

useWebWorkerFn

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

Usage

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,
    dependencies: [
      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
    ],
  },
);

With local dependencies

import { useWebWorkerFn } from '@vueuse/core';

const pow = (a: number) => 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

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>;

2.4 KiB Raw Blame History