Integrating with Other Frameworks Chapter 19Getting ready
To build this app, we will use only basic Vue functionalities. Electron is out of scope for this
book, but for this recipe no knowledge of Electron is required; in fact, this is a good starting
point to learn more about Electron.
How to do it...
In this recipe, we will build a small but complete app--a pomodoro application. A
pomodoro is an interval of about 25 units of time, in which you should concentrate on
doing work. It's called this because you usually use a tomato-shaped kitchen timer to
measure that. This app will track the time instead, so you don't have to buy an expensive
kitchen timer.
The best way to spin up a Vue project with Electron is to use the Electron-Vue boilerplate
(you don't say!). This can be easily achieved with the following command:
vue init simulatedgreg/electron-vue pomodoroYou can answer with the default values, but when asked which plugin to install, just select
vue-electron. Install all the dependencies with npm intall and, if you like, you can
keep the application open with hot-reloading while you make the necessary modifications
with npm run dev. You can hide the dev tools by just clicking on the x in the corner:
First of all, we want our app to be small-ish. Let's go to the app/src/main/index.js file;
this file controls the life cycle of our application. Change the window size to the following:
mainWindow = new BrowserWindow({
height: 200,
width: 300
})