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 โ˜•๏ธ

Top comments (13)

Collapse
 
shubhamzanwar profile image
Shubham Zanwar

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
 
shubhamzanwar profile image
Shubham Zanwar

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

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

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
 
shubhamzanwar profile image
Shubham Zanwar

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

Collapse
 
m0rpheus23 profile image
Morpheus

Great article. How is animation handled?

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git