Base in the Vite documentation:
A web worker script can be directly imported by appending ?worker or ?sharedworker to the import request. The default export will be a custom worker constructor:
import MyWorker from './worker?worker'
const worker = new MyWorker()
The worker script can also use ESM import statements instead of importScripts(). Note: During development this relies on browser native support, but for the production build it is compiled away.
By default, the worker script will be emitted as a separate chunk in the production build. If you wish to inline the worker as base64 strings, add the inline query:
import MyWorker from './worker?worker&inline'
If you wish to retrieve the worker as a URL, add the url query:
import MyWorker from './worker?worker&url'
See Worker Options for details on configuring the bundling of all workers.
How to create a web worker in your nuxt project:
Nuxt v4 Example:
- Create a
customWebWorker.jsin theapp/assetsfolder, or you can create a folder specifically for the workers :app/assets/workers/customWebWorker.js - Create a composable or import the worker in the component, but will recommend to used in a composable
app/composables/useCustomWorker.ts - import the web worker in the composable
// This assume that you created a folder for all the workers
import customWebWorker from "@/assets/workers/customWebWorker?worker";
- Now you can create a ref for that worker
//useCustomWorker.ts
import customWebWorker from "@/assets/workers/customWebWorker?worker";
const useCustomWorker = () => {
//...other functions
const worker = ref<Worker | null>(null);
const startWorker = ()=>{
worker.value = new customWebWorker();
worker.value.onmessage = (event) => {
const {
type, // -> This will depend on you if you are emmiting from the web worker
//...other data params emmited from the worker
} = event.data;
switch (type) {
case 'status':
//...Handle something here
break;
case 'error':
//...Handle error here
break;
case 'result':
// ...
break;
}
};
}
const postMessageToWorker = () =>{
//Remember that the object sended to the worker is on you
// this is just a example
worker.value?.postMessage({ type: 'START', payload: { //...payload } });
}
return {
startWorker,
postMessageToWorker
//...other exports
}
}
Here is an example of web worker that I use for voice to text transcription for https://human-ideas.giessen.dev/tools/audio-text-notes
//...import if you are using a package for some background work
import { pipeline } from "@huggingface/transformers";
const BASE_MODEL = 'Xenova/whisper-tiny.en';
let transcriber = null;
let isEnglishModel = true;
self.onmessage = async (event) => {
//This will be base on the event that you send
const { type, payload } = event.data;
switch (type) {
case 'loadModel':
try {
self.postMessage({ type: 'status', status: 'loading', progress: 0 });
if (payload.model.includes('.en')) {
isEnglishModel = true;
}
else {
isEnglishModel = false;
}
console.log('Loading model:', payload.model || BASE_MODEL);
console.log('Is English:', isEnglishModel);
transcriber = await pipeline('automatic-speech-recognition', payload.model || BASE_MODEL);
self.postMessage({ type: 'status', status: 'loaded', progress: 100 });
} catch (error) {
self.postMessage({ type: 'error', error: error.message });
}
break;
case 'transcribe':
if (!transcriber) {
self.postMessage({ type: 'error', error: 'Model not loaded' });
return;
}
try {
self.postMessage({ type: 'status', status: 'transcribing', progress: 0 });
const { audio, language, model } = payload;
console.log('Transcribing audio:', audio, 'with language:', language, 'and model:', model);
const settings = {
language,
return_timestamps: true
};
const result = await transcriber(audio, !isEnglishModel ? settings : {});
self.postMessage({ type: 'status', status: 'done', progress: 100 });
self.postMessage({ type: 'result', result });
} catch (error) {
self.postMessage({ type: 'error', error: error.message });
}
break;
case 'unloadModel':
transcriber = null;
self.postMessage({ type: 'status', status: 'unloaded', progress: 100 });
break;
default:
self.postMessage({ type: 'error', error: 'Unknown message type' });
break;
}
};
Happy hacking!
Working on the audio version
Projects:
The base for your Nuxt/ BetterAuth &
Drizzle ORM
Must-know resources for devs
Resources to: Learn, Grow,
and Stay Updated as a Developer
Level up your computer science skills with our curated list of top websites for tips, tools, and insights. Got a favorite? Share it and grow our CS resource hub
Explore the Best
Ideas created by Humans, not AI BS...
Top comments (0)