Electron with Vue.js Quick Overview

# Electron with Vue.js (Single Page Application)
As we already know that <a href="http://electronjs.org/">electron.js</a> 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 <a href="https://github.com/SimulatedGREG/electron-vue">electron-vue</a>. In this article I will show you how to get started with the <b>electron-vue</b> and you can also find a sample project in Github provided at the end of this article. 
## Environment Setup
To use <a href="https://github.com/SimulatedGREG/electron-vue">electron-vue</a>, you have to install NodeJS in you local machine. Go ahead download and install NodeJS from their <a href="https://nodejs.org/en/">official website</a>. Once you successfully download and install NodeJS, Open up your terminal and type:

```terminal
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:

```terminal
npm install -g vue-cli
```
After you install vue-cli, you are ready to create your first sample project of <b>electron-vue</b>. To create new project, run this following command:

```terminal
vue init simulatedgreg/electron-vue <your-project-name>
```
This command will automatically scaffold the boilerplate project from <b>electron-vue</b>'s Github repository and setup everything for you to get started.
<img width="257" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/7260f206-9453-fc71-df6b-22881a4fac08.png">
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 <b>src</b> folder. This is where the <b>electron-vue</b> wrap the <b>electron.js</b> in.

## Electron Process Quick Overview
In <b>Electron</b> 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. 

* <b>Main Process</b> : is responsible for creating and managing <i>Browser Window</i>. It can also do any other thing like register global shortcut, create native menus and dialogs, respond to auto-update events, and more. 

* <b>Renderer Process</b> : 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 <b>template</b>, <b>style</b> and <b>script</b>. electron-vue is using the <b>single file </b>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.
 <img width="172" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/211892/5eddfb5d-9d25-2b9f-e5f3-de8fc93f0322.png">
and then add this following line to the components vue file:

```html
<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:

```javascript
component: require('@/components/LandingPage').default
```
and replace with this line:

```javascript
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 <a href="https://vuejs.org">vue official website</a> for the references and sample code. I also provide sample code for this article. You can clone from my Github repo <a href="https://github.com/phanithken/ElectronVueSample">here</a>.