As you may already know, the CLI tool for each popular framework provides facilities so that we can serve the web application locally for testing and development purposes. In the case of Vue, we execute the npm run serve script and usually get the following output:

  App running at:
  - Local: http://localhost:8081 
  - Network: http://192.168.0.10:8081

The traditional ports that are used across different frameworks are as follows:

• Angular: 4200
• React: 3000
• Vue: 8080

However, for demonstration purposes, port 8080 is busy with another application on my machine. This is why the development server takes the next free port. In my case, this is 8081. The tool is going to increment the port number until it reaches a free one, so it is essential to pay attention to the console's output when running the application. For now, let's use the default port, that is, 8080:vue-cli-service serve

vue-cli-service servefunction createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // win.loadURL(`file://${__dirname}/dist/index.html`);
  win.loadURL('http://localhost:8080');

  win.on('closed', () => {
    win = null;
  });
}

For the next step, you are going to need two Terminal windows. In the first one, start the local development server, as follows:

npm run serve

While the server is running, launch the Electron application with the following command:

npm start

You should get the same window that we got with the Vue UI. This time, however, the web server is watching for changes under the hood and instructing the web client to reload. This also applies to our Electron window. To see the live reload feature in action, switch to the src/App.js file and update the label:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js and Electron App"/>
  </div>
</template>

As soon as you save the file, the application reflects these changes on the screen:

You now have a basic project template for an Electron application that is powered by Vue.js. Now, it's time to prepare our application for production compilation.