Vue.js & Electron: The easy way.

A simpler way to build electron apps w/ vue using vue-cli 3.

There’s quite a few tutorials out there for using Vue.js and Electron but they all seem to require a huge amount of effort and boiler generation to get started.

In vue-cli 3 the need for boiler generation has been greatly reduced and the entire developer workflow is much simpler. I sat down to greenfield what it would be like to integrate this simpler setup into Electron and was pleasantly surprised.

Let’s get started.

Now that we’ve got Electron and Vue.js setup, we’ll need a JavaScript file that initializes the Electron app.

As you can see, there’s a development mode that loads the page from the webpack development server and a production version that uses the static assets generated by webpack.

First, let’s get the dev server up and running by adding a script to package.json.

You can adjust the sleep command based on how long it typically takes to startup webpack in the vue-cli-service.

npm run dev

Your site will pop up now and you get all the development environment goodies that Vue.js and webpack have to offer.

For the “production” build we need a little more. By default webpack will use relative URLs for all the static assets. This is no good for Electron, which will need full file paths instead.

In the old vue-cli 2 days, boiler generators would spit out a bunch of config files be like “have fun maintaining these!” Today, with vue-cli 3, there’s a programmable way to mutate webpack config options using a vue.config.js file and it’s wonderful.

That’s about it. You can test this build out pretty easily by just running the vue-cli build and Electron.

npm run build
electron app.js

Now you’re ready to build the final Electron app in whatever builder you choose (there’s like half a dozen of them).

All this code is up on GitHub as well. If you have any suggestions or improvements got ahead and log issues or pull requests in that repo.