Electron meets Vue.js 3 and Parcel.js 2

Antonio — Thu, 24 Mar 2022 20:06:56 +0000

It’s easy to build a desktop app through Electron. But if you need state management or interesting views, it can get complicated.

If you search for boilerplates with Electron + React or Vue, you’ll find that many of them have added complexity that isn’t needed for building a small app. That’s why I created this boilerplate with the basic features, which you can find on Github.

Why this three technologies

It was a no-brainer for me to use these technologies:

Vue.js as the front end framework. When it comes to building a UI, it doesn’t get much simpler.
Electron. Used in many of the apps we use daily. (It’s bananas that it’s just javascript.)
Parcel. My go-to building tool. It just works. Perfectly.

And like everything, it wasn't all plain sailing. Putting together an app when Vue.js 3 and Parcel 2 were in their early stage versions was challenging at times but that led me to learn even more about the three technologies.

I’ve written detailed documentation in the Readme, including folder structure, how to make a release, and how the events works in Electron.

Real world example

The motivation for this project came from my friends complaining about the HEIC format of iPhone photos. I decided to create a simple program to convert HEIC files to PNG/JPG, and this is where this boilerplate becomes handy.

The app is free to download and the code is on Github.

My first article 🥳 🎉

DEV Community: Antonio

Electron meets Vue.js 3 and Parcel.js 2

Why this three technologies

Real world example