1---
2category: Browser
3---
4 
5# useWebWorkerFn
6 
7Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of [alewin/useWorker](https://github.com/alewin/useWorker).
8 
9## Usage
10 
11### Basic example
12 
13```ts
14import { useWebWorkerFn } from '@vueuse/core'
15 
16const { workerFn } = useWebWorkerFn(() => {
17  // some heavy works to do in web worker
18})
19```
20 
21### With dependencies
22 
23```ts {7-9}
24import { useWebWorkerFn } from '@vueuse/core'
25 
26const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
27  dates => dates.sort(dateFns.compareAsc),
28  {
29    timeout: 50000,
30    dependencies: [
31      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
32    ],
33  },
34)
35```
36 
37### With local dependencies
38 
39```ts {9-9}
40import { useWebWorkerFn } from '@vueuse/core'
41 
42const pow = (a: number) => a * a
43 
44const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
45  numbers => pow(numbers),
46  {
47    timeout: 50000,
48    localDependencies: [pow]
49  },
50)
51```
52 
53## Web Worker
54 
55Before you start using this function, we suggest you read the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) documentation.
56 
57## Credit
58 
59This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of [@Donskelle](https://github.com/Donskelle) to migration.
60 
61## Type Declarations
62 
63```ts
64export type WebWorkerStatus =
65  | "PENDING"
66  | "SUCCESS"
67  | "RUNNING"
68  | "ERROR"
69  | "TIMEOUT_EXPIRED"
70export interface UseWebWorkerOptions extends ConfigurableWindow {
71  /**
72   * Number of milliseconds before killing the worker
73   *
74   * @default undefined
75   */
76  timeout?: number
77  /**
78   * An array that contains the external dependencies needed to run the worker
79   */
80  dependencies?: string[]
81  /**
82   * An array that contains the local dependencies needed to run the worker
83   */
84  localDependencies?: Function[]
85}
86export interface UseWebWorkerFnReturn<T extends (...fnArgs: any[]) => any> {
87  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
88  workerStatus: ShallowRef<WebWorkerStatus>
89  workerTerminate: (status?: WebWorkerStatus) => void
90}
91/**
92 * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
93 *
94 * @see https://vueuse.org/useWebWorkerFn
95 * @param fn
96 * @param options
97 */
98export declare function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(
99  fn: T,
100  options?: UseWebWorkerOptions,
101): UseWebWorkerFnReturn<T>
102```
103