Electron with Vue.js (Single Page Application)

As we already know that electron.js provide us lots of more easier to develop cross platform Desktop application. Moreover, the combination of electron and vue is incredibly amazing. It help us do lots more than we ever think, but the process of integrating two of them is such a little bit irritating especially for the newbie like me. Fortunately, I just found a very useful library that help us in doing the electron and vue integration. It's called electron-vue. In this article I will show you how to get started with the electron-vue and you can also find a sample project in Github provided at the end of this article.

Environment Setup

To use electron-vue, you have to install NodeJS in you local machine. Go ahead download and install NodeJS from their official website. Once you successfully download and install NodeJS, Open up your terminal and type:

node --version

If there is a node version message show up, that's mean you have NodeJS installed on your machine. Now, It's time to install vue-cli using npm:

npm install -g vue-cli

After you install vue-cli, you are ready to create your first sample project of electron-vue. To create new project, run this following command:

vue init simulatedgreg/electron-vue <your-project-name>

This command will automatically scaffold the boilerplate project from electron-vue's Github repository and setup everything for you to get started.

After the process is done It will bring you all the needed file as shown in the picture above. Let's pay attention to the src folder. This is where the electron-vue wrap the electron.js in.

Electron Process Quick Overview

In Electron we use the Chromium architecture. What do I mean by that? Chromium run each tab in a separate process, so If one tab run into fatal error, It doesn't bring the entire application down. By that mean, If there is something strange happen to the app, the main process has the capability of blocking the renderer process easily. That's why there are two processes running synchronously inside electron.

Main Process : is responsible for creating and managing Browser Window. It can also do any other thing like register global shortcut, create native menus and dialogs, respond to auto-update events, and more.
Renderer Process : responsible for running the user interface in the application. This is where the Vue come in.

Vue Components

Vue app consists of many components. Each component contain template, style and script. electron-vue is using the single file style of VueJS. As a developer, we always want to separate those files. So there is a way to do so by creating two more file for css and script and wrap them in a single folder.

and then add this following line to the components vue file:

<script src="./LandingPage.js"></script>
<style src="./LandingPage.css"></style>

Don't forget to change the route file as well. In route -> index.js find this line:

component: require('@/components/LandingPage').default

and replace with this line:

component: require('@/components/LandingPage/LandingPage').default

Now you have a well structure component vue template in your project.
If you are new to Vue.JS, I recommend you to check out the vue official website for the references and sample code. I also provide sample code for this article. You can clone from my Github repo here.