DEV Community

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

Posted on • Originally published at shubhamzanwar.com

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: https://cmake.org/install/)
  • 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 https://github.com/nodegui/vue-nodegui-starter 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

<template>
  <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>
    </vn-view>
  </vn-view>
</template>

<script>
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 {
      count,
      decrement,
      increment,
      styles
    }
  }
};
</script>

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

vue-nodegui-demo-app

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)

Collapse
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 https://github.com/nodegui/nodegui/releases/download/v0.24.0/nodegui-v0.24.0-napi-v3-linux-x64.tar.gz
prebuild-install http 404 https://github.com/nodegui/nodegui/releases/download/v0.24.0/nodegui-v0.24.0-napi-v3-linux-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=3 runtime=napi arch=x64 libc= platform=linux)
npm ERR! code ELIFECYCLE
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
Collapse
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

Collapse
shubhamzanwar profile image
Shubham Zanwar Author

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

Collapse
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?

Collapse
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: news.ycombinator.com/item?id=20706731

Collapse
devemloop profile image
Edwin Marroquin <devemloop>

How to use vue-router ?

Collapse
jswhisperer profile image
Greg, The JavaScript Whisperer

Glad to be the other helper 😊
Great intro article!

Collapse
shubhamzanwar profile image
Shubham Zanwar Author

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

Collapse
jswhisperer profile image
Greg, The JavaScript Whisperer

I plan too!

Collapse
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.

Collapse
shubhamzanwar profile image
Shubham Zanwar Author

There's a nodegui plugin to handle animation for nodegui widgets: github.com/nodegui/nodegui-plugin-...

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

Collapse
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?

Collapse
m0rpheus23 profile image
Morpheus

Great article. How is animation handled?