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.
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 ✨
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.
useNuxtWorker
composable for more fine-grained control.shared.ts
suffixcorepack enable
pnpm install
pnpm dev:prepare
pnpm dev
to start playground in development modeMade with ❤️
Published under the MIT License.