Desktop Apps

Vue is not limited to just developing web and native mobile applications, it allows building desktop apps as well. Here are some important reasons why one would choose Vue over a native language solution:

  • cross-platform: all applications are developed with JavaScript, and can be packaged for Windows/MacOS/Linux;
  • easy to build: frameworks allow you to simply develop a web application and then 'convert' it to a desktop one using a packager;
  • community: if you maintain an open-source desktop project, you will more likely find contributors for it.

There are however some downsides, common for all JavaScript-powered desktop applications. They tend to have big package size (at least 30 MB) and are know to have heavy RAM usage.

There are mainly two ways to build a desktop application with Vue: HTML+CSS-based solutions or native GUI. First one is represented by Electron and NW.js, and the second is Vuido.

Electron

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux

Electron is by far the most popular library for writing JavaScript desktop applications today. Some of the more well-known apps are Slack and Discord messengers, Atom code editor and Visual Studio Code IDE.

Pros

  • easy to start with
  • good development documentation
  • no need to change existing source code
  • has Vue CLI plugin
  • mature developer community

Cons

  • big package size
  • high memory usage
  • unprotected source code in package

NW.js

NW.js (previously known as node-webkit) is a framework for building desktop applications with HTML, CSS, and JavaScript. Similar to Electron, it is based on Chromium and Node.js. NW.js lets you call Node.js code and modules directly from browser, along with using Web technologies in your app. Further, you can easily package a web application to a native application.

Pros

  • easy to start with
  • no need to change an existing source code
  • compiling to protected binaries
  • has Vue CLI plugin

Cons

  • big package size
  • high memory usage
  • significantly less used than Electron

Electron VS NW.js

Electron and NW.js share many features: they are both built on top of Chromium and Node.js and use HTML, CSS and JS for building desktop apps. They also have some notable differences:

  • In NW.js the main entry point of an application is a web page or a JS script. You specify this entry via package.json main property. In Electron, the entry point is a JavaScript script. Instead of providing a URL directly, you manually create a browser window and load an HTML file using the API.
  • During the build process NW.js builds the whole Chromium; Electron uses libchromiumcontent to access Chromium's Content API
  • NW.js has built-in support for compiling your source code to protected binaries. Electron is packaging its applications with asar, which contains the applications' unprotected source code.

Quasar Framework

Quasar Framework is a framework which allows for cross-platform application development. Design your apps with a large library of VueJS components, then use Quasar's powerful yet simple to use CLI to automatically build your app for the Desktop via Electron. If you are looking to do more with your code than only Electron apps, then Quasar is an excellent solution for your cross-platform application ideas.

Vuido

Vuido is a framework for creating native desktop applications based on Vue.js. Applications using Vuido can run on Windows, OS X and Linux, using native GUI components.

Under the hood, Vuido uses the libui library which provides native GUI components for each desktop platform, and the libui-node bindings for Node.js.

The core difference between Vuido and Electron or NW.js is that you're not going to use HTML tags or CSS styles with Vuido, you are limited to a predefined set of UI components, that the OS platforms provide.

Pros

  • easy to build
  • provides small package size compared to Electron or NW.js apps
  • well-documented

Cons

  • appearance is limited to OS native GUI components
  • doesn't have a Vue CLI plugin, only Vue CLI 2 boilerplate