DEV Community

Cover image for Electron alternative: Announcing vue-nodegui 🚀💚
Shubham Zanwar
Shubham Zanwar

Posted on • Originally published at

Electron alternative: Announcing vue-nodegui 🚀💚

In this blog post, we shall take a look at vue-nodegui, a newly-released JS library to create cross-platform native desktop applications using VueJS 💚

Why not electron?

Before we dive into vue-nodegui, let us discuss the most popular alternative out there: Electron ⚛️

Electron has been the most popular library for creating desktop applications using JS for a while now. While it is an amazing solution, it has some severe pain points by design:

  • Electron apps tend to be bloated because every Electron app ships a version of the Chromium browser in which it runs. Hence, it's not truly native.
  • Electron apps also suffer from excess CPU/memory utilization issues.

What's vue-nodegui? 💚

vue-nodegui is a custom vue3 renderer for nodegui, a native JS bindings library for Qt5. Below is an excerpt from the nodegui announcement last year:

"NodeGUI is powered by Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. NodeGui wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time NodeGui aims to be memory and CPU efficient."

vue-nodegui allows developers to use the familiar Vue API to create their native desktop app - something that react-native does for react. Since vue-nodegui is ultimately powered by Qt5, it means that vue-nodegui does not require a browser environment to render in. Instead, the widgets in the app are truly native.

Features 💎

  • Access to new Vue3 features (setup, composition api, etc)
  • 🧬 Cross platform. Should work on major Linux flavours, Windows and MacOS
  • 📉 Low CPU and memory footprint. Current CPU stays at 0% on idle and memory usage is under 20mb for a hello world program.
  • 💅 Styling with CSS (includes actual cascading). Also has full support for Flexbox layout (thanks to nodegui and Yoga).
  • ✅ Support for all node_modules (compatible with Node v12 and above)
  • 🎪 Native widget event listener support. supports all event available from Qt / NodeJs.
  • 💸 Can be used for Commercial applications.
  • 📚 Good documentation and website.
  • 🧙‍♂️ Good documentation for contributors.
  • 🦹🏻‍♀️ Good support for dark mode (Thanks to QT).

Requirements 📝

Below are the general requirements for systems to create vue-nodegui apps:

  • Only supported on 64bit OS.
  • CMake 3.1 and up (Installation instructions can be found here:
  • Make, GCC v7
  • NodeJS v12.x and above

You can find the detailed installation steps for each of the requirements and troubleshooting guide on the Getting started page.

Let's try it out 🤩

To get started, let's first clone the starter repo:

git clone hello-world
cd hello-world
npm install
npm run dev

Let's create a basic hello-world project with a counter

Clear out the contents of App.vue and write the below code in it

  <vn-view :styleSheet="styles">
    <vn-text id="header">Hello world</vn-text>
    <vn-view id="row">
      <vn-button @clicked="decrement">-</vn-button>
      <vn-text id="count">{{count}}</vn-text>
      <vn-button @clicked="increment">+</vn-button>

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value += 1;

    const decrement = () => {
      count.value -= 1;

    const styles = `
      #header {
        padding: 10px;
        background: #36495e;
        width: 200px;
        color: #fff;
        qproperty-alignment: AlignCenter;
      #row {
        width: '100%';
        flex-direction: 'row';
        justify-content: 'center';
      #count {
        padding: 5px;
        qproperty-alignment: AlignCenter;

    return {

After running npm run dev to fire up the app in your terminal, the output should look like the screenshot below


As you can see, we have created a basic counter application by using the very familiar Vue API. 🚀🤘🏽

However you may have notices new tags: <vn-view>, <vn-button>, <vn-text> These are what we call native-tags in vue-nodegui. To create any vue-nodegui application, you will have to use these. You can check out the entire catalog of widgets here

Contributions and Support ☃️

If you went through the vue-nodegui repo, you would have realized that even though it is an awesome project, it is still in it's infancy. Some more work on creating widgets and an ecosystem around it would be required before we can use it in production apps. This is where you all come in! 🚪

We wholeheartedly welcome any kind of contributions for vue-nodegui - code, documentation, sister libraries (animation, testing, components) in the form of pull-requests. We have also opted into the #Hacktoberfect to encourage these contributions! 🥳

If you liked the project, please show your support by starring ⭐️⭐️ the repo

If you are able to support financially, kindly feel free to sponsor 💵💵 this project

Super excited to build something magnificent together! ♥️

Cheers ☕️

Discussion (13)

graciano profile image
graciano codes

Hi, great project! <3

I'm having trouble in the npm install step. Seems like a broken 404 url. I tried the react version in my machine and it works, so I don't think this is an error related to the system requirements...

> prebuild-install --backend=cmake-js --runtime=napi --verbose

prebuild-install info begin Prebuild-install version 5.3.5
prebuild-install info looking for cached prebuild @ /tmp/my-cache/_prebuilds/da729a-nodegui-v0.24.0-napi-v3-linux-x64.tar.gz
prebuild-install http request GET
prebuild-install http 404
prebuild-install WARN install No prebuilt binaries found (target=3 runtime=napi arch=x64 libc= platform=linux)
npm ERR! errno 1
npm ERR! @nodegui/nodegui@0.24.0 prebuild:install: `prebuild-install --backend=cmake-js --runtime=napi --verbose`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @nodegui/nodegui@0.24.0 prebuild:install script.
Enter fullscreen mode Exit fullscreen mode
shubhamzanwar profile image
Shubham Zanwar Author

Hi Graciano. Thanks for your note. I looked into it and it appears that this problem exists in both the vue and the react versions. However, it appears that we can still use the library by ignoring this error.
In case that was the blocker for you, I think you can still create apps. Meanwhile, I'll try taking a look at why this is happening :D

shubhamzanwar profile image
Shubham Zanwar Author

Oh nooo. I'll take a look at it today!

olivergrimsley profile image
Mike Oliver

Unless I am missing something, if you compile your program with QT5 non commercial, that is GPL licensed, and your program would be as well . . . and it could not be effectively used in commercial products (at least by me). It would also mean your MIT license would not work. Am I missing something?

shubhamzanwar profile image
Shubham Zanwar Author

vue-nodegui is a vue renderer for nodegui and we don't directly interface with Qt. However, even with nodegui, the Qt code is not modified and only linked to dynamically - thereby keeping us in compliance with the LGPL licence from Qt.

Checkout this thread from the author of nodegui:

devemloop profile image
Edwin Marroquin <devemloop>

How to use vue-router ?

jswhisperer profile image
Greg, The JavaScript Whisperer

Glad to be the other helper 😊
Great intro article!

shubhamzanwar profile image
Shubham Zanwar Author

So great to e-meet you, Greg! 👋🏽
We love your contributions. Keep 'em coming! :D

jswhisperer profile image
Greg, The JavaScript Whisperer

I plan too!

zoedreams profile image

nice. electron has access to the opengl canvas element. How is accelerated graphics handled using vue.. curious.

honestly i think this is a god send. thank you for sharing.

shubhamzanwar profile image
Shubham Zanwar Author

There's a nodegui plugin to handle animation for nodegui widgets:

We're still on our way to bring that capability to vue-nodegui. Should be coming soon :D

zoedreams profile image

nice work. i read the source. Continue, this will replace electron stack.. TG. electron is good to learn full stack on, but when you get your project to a certain point, chrome falls down. Its just not designed to handle large scale apps like shells, or OS, or modern VR/XR type stuff. That is the future. Native llvm is future.. IS there any intergation with wasm in the project slated?

m0rpheus23 profile image

Great article. How is animation handled?