Nuxt•6d ago

Whats up with Nuxt + Shared Web Workers?

Shared Web Workers are 100% across all major browsers and Safari on IOS since 2022. But I can't find any documentation or examples on how to use SharedWorker() in Nuxt. nuxt-worker looks interesting, but it doesn't do shared workers and hasn't had a major update in a year. I got a shared worker to work in dev server (see code), but when built, it's not transpiling typescript. What's the way to use shared web workers in nuxt/vite? Thank you!

<!-- app.vue -->
<template>
  <v-app>
    <NuxtLayout />
   </v-app>
</template>

<script lang="ts" setup>
const { workerMessage } = useSharedWorker()
watch(
  () => workerMessage.value,
  (newValue) => {
    console.log('workerMessage', newValue)
  },
  { immediate: true }
)
</script>

<!-- app.vue -->
<template>
  <v-app>
    <NuxtLayout />
   </v-app>
</template>

<script lang="ts" setup>
const { workerMessage } = useSharedWorker()
watch(
  () => workerMessage.value,
  (newValue) => {
    console.log('workerMessage', newValue)
  },
  { immediate: true }
)
</script>

See attached files...

shared-worker.ts

useSharedWorker.ts

2 Replies

kapa.ai•6d ago

Hi @FunAndFriendly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit documentation or official examples on using SharedWorker (Shared Web Workers) in Nuxt (either Nuxt 3 or Nuxt 4), nor do they provide guidance on TypeScript transpilation for worker files or integration with Vite in this context. There is some related discussion about serving static files (like workers) from the public directory and issues with headers and CORS, but nothing specifically about SharedWorker usage or best practices for integrating them with Nuxt and Vite builds. The sources also do not mention the nuxt-worker package or its limitations regarding shared workers. If you are experiencing issues with TypeScript not transpiling your worker files in production builds, the knowledge sources do not provide a Nuxt-specific solution or recommended workflow for this scenario. In summary:
I'm sorry, but there's no information in the provided knowledge sources about using SharedWorker in Nuxt, handling their TypeScript transpilation, or recommended patterns for integrating shared web workers with Nuxt and Vite. You may need to consult broader Vite or Vue resources, or open a discussion in the Nuxt community for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@478253467077574666> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Whats up with Nuxt + Shared Web Workers?

Did you find this page helpful?