Use Web Workers with Ease in Vue.js with vue-worker

Joshua Bemenderfer

Like many developers, when Web Workers first emerged onto the web development scene, I was incredibly enthusiastic and dreampt of the various amazing things I could accomplish with them. However, my enthusiasm was quickly dampened when I realized that workers had to be loaded from separate files hosted on the webserver. That seemed like a huge pain that wasn’t worth the effort. Combined with the API overhead, I haven’t really used workers again since my first try until now. Looking at vue-worker, I’m suddenly amazed again at what can be accomplished in my Vue.js apps with a nice simple API and no external files.

The core premise of vue-worker (or rather, simple-web-worker by the same author) is that Web Workers can be initialized from a Data URI, which can just be a stringified function.

vue-worker wraps the complexity involved in that with a simple, easy-to-understand API, allowing you to easily execute multitheaded functions just like promises.


Install vue-worker via Yarn or NPM:

# Yarn
$ yarn add vue-worker

$ npm install vue-worker --save

Now, enable the VueWorker plugin:


import Vue from 'vue';
import VueWorker from 'vue-worker';
import App from 'App.vue';


new Vue({
  el: '#app',
  render: h => h(App)

This provides your components with the ability to access this.$worker.

Running Functions in the Worker

Now, inside your component you can use this.$, args[]).

This runs a function that outputs Hello, World! in a worker thread when the component is mounted:

export default {
  mounted() {
    this.$ => {
      return `Hello, ${arg}!`
    }, ['World'])
    .then(result => {
    .catch(e => {

Reusable Workers

You can create a reuseable “worker” proxy with this.$worker.create([{message, func}]).

export default {
  data() {
    return {
      myWorker: null

  created() {
    this.myWorker = this.$worker.create([
      {message: 'message1', func: (arg) => `Output 1 ${arg}`},
      {message: 'message2', func: () => 'Output 2'}

    this.myWorker.postMessage('message1', ['Boop!'])
    .then(result => {

There’s plenty more you can do too, take a look at the vue-worker and simple-worker docs.

  Tweet It

🕵 Search Results

🔎 Searching...