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.

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

<input checked="" disabled="" type="checkbox"> 📖 basic documentation
<input checked="" disabled="" type="checkbox"> 🧪 client-side test
<input disabled="" type="checkbox"> 🧱 useNuxtWorker composable for more fine-grained control
<input disabled="" type="checkbox"> ⚗️ automatic deduplicating on client-side
<input disabled="" type="checkbox"> 📦 webpack support
<input disabled="" type="checkbox"> ⚠️ type-level + dev warning if non serialisable args are passed
<input disabled="" type="checkbox"> 🤝 automatic shared workers with .shared.ts suffix
<input disabled="" type="checkbox"> 💤 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.

Package detail

nuxt-workers

readme