Nuxt Workers

SSR-safe, zero-config Web Workers integration for Nuxt.

Web Workers enable running JavaScript code in the background to perform complex tasks without blocking the main thread, ensuring smoother and more responsive web applications.

Read more about Web Workers.

• ✨  Changelog
• ▶️  Online playground

Features

• 🔥 SSR-safe usage of Web Workers
• ✨ auto-imported, zero-configuration
• 💪 fully typed

Quick Setup

Install and add nuxt-workers to your nuxt.config.

npx nuxi@latest module add nuxt-workers

That’s it! You can add web workers in your Nuxt app ✨

Usage

Create your web worker in the ~/workers/ directory. It should export any utilities you want to be usable elsewhere:

// workers/hi.ts
export function hi() {
  return 'Hello from web worker!'
}

Then, call it in the rest of your Vue app.

<script setup lang="ts">
const message = await hi()
</script>

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

[!TIP]
Even if your function is synchronous, it will always become async when it is called within a worker because communication with a worker will always be asynchronous.

Roadmap

• 📖 basic documentation
• 🧪 client-side test
• 🧱 useNuxtWorker 🧱 `useNuxtWorker` composable for more fine-grained control
• ⚗️ automatic deduplicating on client-side
• 📦 webpack support
• ⚠️ type-level + dev warning if non serialisable args are passed
• 🤝 automatic shared workers with .shared.ts 🤝 automatic shared workers with `.shared.ts` suffix
• 💤 worker auto-shutdown

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

Made with ❤️

Published under the MIT License.