Develop a Vuejs app within an Electron container

Posted on December 18, 2020

Here my take to develop a Vue.js UI using SFC (Webpack and Vue CLI) within an Electron app.


First off, I've created a Vue.js app using vue create my-app then I've added npm i -D electron to the project.

Vue Config

I've added this config in vue.config.js to make the build version work:

module.exports = {
  publicPath: ''


In the main.js file of Electron I've put, in the createWindow function, this condition:


This way I can test both the serve version and the build version as well.


In package.json I've added the first two scripts commands:

"start": "electron .",
"prod": "PROD=true electron .",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

To start a development session, I run npm run serve to launch the local webpack server for Vue and then npm start to launch Electron app.

Since Electron loads the http://localhost:8080/ page I'll get instant reload on each edit.

To check the build version, I run npm run build and then npm run prod to launch Electron using the build version.