We've already looked at how to use Electron applications with the Angular and React frameworks. Now, it's time to look at another popular framework: Vue.js. This framework will help you boost your productivity when building desktop applications with web technologies.

Similar to the Angular CLI and Create React App, Vue.js has its own CLI tool too. You can install it and generate a new application called integrate-vue by following these steps:

1. Run the following two commands:

npm install -g @vue/cli
vue create integrate-vue

2. The tool is going to ask you a few questions so that it can figure out the final configuration of the project. For preset, please select the default option. You can use the Manually select features option later:

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

3. There are two different Node package managers that the community uses nowadays: NPM and Yarn. Vue.js is going to ask you to pick your favorite one. We will use it later to install dependencies:

? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
> Use NPM

4. We are going to use NPM, so select the corresponding entry and press Enter.
5. Depending on the tool's version, you may see a lot of output during the process of project generation. Make sure you see a successful-completion output, similar to the one shown in the following code:

Successfully created project integrate-vue.
Get started with the following commands:

 $ cd integrate-vue
 $ npm run serve

6. Now, open to the integrate-vue folder in the Visual Studio Code

7. Let's inspect the scripts that are available in the package.json file out of the box:

{
  "name": "integrate-vue",
  "version": "0.1.0",
 "private": true,
 "scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
  },
}

Here, we have three main scripts so that we can serve the web application locally, build it for distribution, and perform code quality checks and linting.

8. Let's start the application and verify that the project compiles and runs as expected:

npm run serve

9. Your output should look similar to the following. Please take note of the URL address and port number of the application:

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

  Note that the development build is not optimized.
  To create a production build, run npm run build.

10. Use your favorite browser and navigate to http://localhost:8080. Verify that you can see a standard home page for all the projects you generated with the Vue CLI:

Now, it's time to install the Electron dependency:

1. Use the following command to grab the most recent version that's available on the NPM registry:

npm i -D electron

2. The next step is to configure the main entry in the package.json file so that it points to the main.js file. This is how Electron finds the main entry point and execute it on startup:

{
  "name": "integrate-vue",
 "version": "0.1.0",
 "private": true,
 "main": "main.js",
 "scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
  },
}

3. Finally, as you may already know from the previous chapters, we need to put a minimal main.js implementation in the project's root folder:

const { app, BrowserWindow } = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadFile('index.html');

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

app.on('ready', createWindow);

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

app.on('activate', () => {
 if (win === null) {
 createWindow();
 }
});

4. The Vue CLI generates a start script that runs a local web server for testing and development purposes. Given that our primary focus is on Electron and desktop development, I recommend renaming the existing start script to serve and using a new start implementation that launches the Electron shell:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "start": "electron .",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
}

5. As soon as you run the npm run build command, the Vue CLI is going to perform a production build with the output artifacts that live in the dist folder. This means that our Electron shell needs to load the dist/index.html file at runtime when we launch it locally:

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

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

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

Now, let's take a quick look at the Vue configuration files and how we can change the base path of our application.