How To Make A Windows App With Vue.js And Electron

For web developers, making a Windows app requires a significant learning curve. However, now there is a solution to convert a JavaScript web app to Windows app with Electron without too much work. React can easily combined with Electron to build a Windows app.

Electron is a Chromium browser-based runtime that allows us to run web apps like a native desktop app. It wraps Chromium around our web app so that it looks like it’s a desktop app. We can make some calls to native APIs like file manipulating, modifying the menus, and interact with some hardware.

Building an Electron Vue.js app is easy if we use the vue-cli-plugin-electron-builder add-on for Vue CLI 3. It is from https://github.com/nklayman/vue-cli-plugin-electron-builder.

In this article, we will build a Vue Electron app that runs on Windows. It is an address book app that allows us to add contacts and save them with a back end serving a JSON file.

To start building the app, we start by installing Vue CLI by running:

npm i -g @vue/cli

Next, we create our Vue.js project by running vue create address-book-app . Be sure to select ‘Manually select features’, and after that choose to include Babel, Vuex, and Vue Router. This will create the initial files for our app. Next, we add Electron to our app by running:

vue add electron-builder