nuxt-workers

To integrate Web Workers into your Nuxt application with zero configuration, install the nuxt-workers module using the Nuxt CLI:

npx nuxi@latest module add nuxt-workers

Nuxt Workers allows you to run code in the background via Web Workers. The workflow consists of two steps:

1. Define the worker: Create a file in the ~/workers/ directory. Export the functions or utilities you want to access.
2. Call the worker: Import and call the exported functions directly in your Vue components. Because communication with a Web Worker is inherently asynchronous, all worker functions will behave as async functions, even if they are defined as synchronous in the worker file.

Functions are auto-imported and fully typed.

// 1. Define the worker in ~/workers/hi.ts
export function hi() {
  return 'Hello from web worker!'
}

<script setup lang="ts">
// 2. Call it in your component
// Note: hi() is automatically treated as an async function
const message = await hi()
</script>

<template>
  <div>{{ message }}</div>
</template>

nuxt-workers automatically scans your configured worker directories for exported functions. For every named export found in a worker file, the module generates a virtual import.

This allows you to import worker functions directly into your Nuxt application as if they were local modules. The module automatically wraps these imports in a ToAsyncFunction type, ensuring they are treated as asynchronous functions (returning Promise<R>) when called from the main thread.

Note: If duplicate export names are found across different worker files, a warning will be emitted: [nuxt-workers] Duplicate export ‘{name}’ found in ‘{file1}’ and ‘{file2}’.

nuxt-workers automatically generates TypeScript definitions for your worker exports. It creates a virtual declaration file at buildDir/types/nuxt-workers.d.ts.

This ensures that when you import a worker export in your Nuxt application, you receive full type safety and IntelliSense, with the return types correctly mapped to Promise<T> via the internal ToAsyncFunction utility.

The nuxt-workers module can be configured in your nuxt.config.ts using the workers key. The primary configuration option is dir, which specifies the directories to be scanned for worker files.

By default, this is set to 'workers' and is resolved relative to your srcDir. You can provide a single string or an array of strings to scan multiple directories.

export interface ModuleOptions {
  /**
   * Path to directories to be scanned for workers.
   * By default it is resolved relative to your `srcDir`
   */
  dir: string | string[]
}