Web Workers with Vue
Comlink for typed web worker API, offloading heavy computation, reactive progress tracking.
Web Workers with Vue is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Web Workers
JavaScript runs on a single main thread shared with rendering. Heavy computation freezes the UI. A Web Worker runs code on a separate thread, keeping your Vue app responsive.
Creating a Worker
Instantiate a worker from a module file. Vite supports the { type: "module" } option and bundles the worker correctly.
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);The Worker File
The worker has its own global scope with no DOM access. It listens for messages and posts results back.
// worker.js
self.onmessage = (e) => {
const result = heavyCompute(e.data);
self.postMessage(result);
};Sending Data with postMessage
From the main thread, call postMessage with a data payload. The data is structured-cloned across the thread boundary.
worker.postMessage({ numbers: [1, 2, 3] });Receiving Results
Handle the worker's reply with onmessage. The event's data holds the posted value.
worker.onmessage = (e) => {
console.log("result", e.data);
};Updating a Reactive Ref
Inside the handler, write the result into a reactive ref so the template updates automatically.
import { ref } from "vue";
const result = ref(null);
worker.onmessage = (e) => {
result.value = e.data;
};Wiring It in a Composable
Wrap the worker in a composable so it is reused and cleaned up. Terminate the worker on unmount to free the thread.
import { ref, onUnmounted } from "vue";
export function useWorker() {
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);
const result = ref(null);
worker.onmessage = (e) => { result.value = e.data; };
onUnmounted(() => worker.terminate());
return { result, run: (d) => worker.postMessage(d) };
}The Message Protocol Pain
Raw postMessage requires you to invent a message-type protocol and match requests to responses by hand. This gets verbose for multiple operations.
Comlink to the Rescue
Comlink wraps the message channel so calling worker functions feels like calling local async methods. Install it with the worker.
npm install comlinkExposing an API from the Worker
In the worker, expose an object of functions with Comlink.expose.
// worker.js
import * as Comlink from "comlink";
const api = {
add: (a, b) => a + b,
process: (data) => heavyCompute(data)
};
Comlink.expose(api);Comlink.wrap for a Typed Proxy
On the main thread, Comlink.wrap returns a proxy whose methods return promises, giving you a clean typed API into the worker.
import * as Comlink from "comlink";
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);
const api = Comlink.wrap(worker);
const sum = await api.add(2, 3); // 5Quick Check
What does Comlink.wrap provide over raw postMessage?
Recap
Offload heavy work to a Web Worker created with new Worker(url, { type: "module" }). Send data with postMessage, handle replies in onmessage, and write results into a reactive ref. Wrap it in a composable that terminates on unmount, and use Comlink.wrap for a clean, typed, promise-based proxy API.
Frequently asked questions
Is the “Web Workers with Vue” lesson free?
Yes — the full text of “Web Workers with Vue” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Web Workers with Vue”?
Comlink for typed web worker API, offloading heavy computation, reactive progress tracking. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Web Workers with Vue” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.