Introduction

When I first started my journey in web development, I started with some of the more popular JavaScript frameworks at the time such as AngularJS or React to get a feel for how I can make beautiful, responsive websites with ease. While I also had an interest in building cross-platform mobile apps or even desktop apps, getting started can be very difficult, especially if learning a new language or framework for each specific platform is required. Sure, there are other similar solutions such as React Native or Electron that can compile web-based code into mobile apps or desktop apps, respectively, but if I had to learn a new framework for a different platform, I might as well learn a per-platform framework with which I can write native code to optimize performance. So web code can only be deployed to web apps was what I thought . . . until I recently discovered Quasar, a relatively new web framework based on Vue.js that takes the term “cross-platform” to another level.

Why Quasar?

While there have been many different frameworks developed over the years to support compatibility for two or three different platforms, Quasar is the only open-source solution I know of so far that supports the most platforms simultaneously. With Quasar, the exact same source code can be deployed as:

• a web application,
• an Android mobile app (via Cordova),
• an iOS mobile app (via Cordova),
• a Windows desktop app (via Electron),
• a macOS desktop app (via Electron),
• a Linux desktop app (via Electron),
• or even a browser extension!

With this much cross-platform compatibility, maintaining the source code has never been easier, since there is now only one codebase for all platforms rather than multiple, separate codebases for different platforms. The only apparent downside that one might worry about is the relatively lower performance of web-based apps compared to platform-native code, but at least Quasar is built to optimize performance and get rid of as much bloat as possible (aka “tree shaking”) for every platform.

Getting Started

With just a few commands from the command line, you can get started installing, building, and running the default Quasar app in just a few minutes!

First, make sure that Node.js is installed (any recent LTS version, and downloading via nvm is recommended).

$ nvm install --lts
$ nvm use --lts

Install Yarn, the Quasar-recommended package manager over npm.

$ npm install -g yarn

With Yarn, install the Quasar CLI.

$ yarn global add @quasar/cli
$ export PATH="$(yarn global bin):$PATH"

Run “quasar create” to create a new Quasar app.

$ quasar create folder_name
$ cd folder_name

Currently, this creates a Quasar v1 app (which uses Vue 2) until Quasar v2 (using Vue 3) is out of beta. To create a Quasar v2 app instead, the “–branch next” option is currently required.

Now you can build the app for your desired platform.

# SPA (single-page web app)
$ quasar build

# PWA (progressive web app)
$ quasar build -m pwa

# SSR (server-side rendered web app)
$ quasar build -m ssr

# iOS mobile app
$ quasar build -m ios

# Android mobile app
$ quasar build -m android

# Windows desktop app
$ quasar build -m electron -T win32

# macOS desktop app
$ quasar build -m electron -T darwin

# Linux desktop app
$ quasar build -m electron -T linux

# (Build all desktop apps simultaneously)
$ quasar build -m electron -T all

# BEX (browser extension)
$ quasar build -m bex

And that’s it! If you want to start developing, make changes to the code, and see the results in real time, you can run the app in development mode with the “quasar dev” command. Keep this app open as long as you are developing your app to test your changes and keep your code bug-free!

Conclusion

Thanks to Quasar, this is perhaps the first time (perhaps ever) when I felt excited to start developing on my own, as if I have the power to create any app I want now. If you are looking to get starting creating your own apps, regardless of your experience level with Vue.js (or especially if you have prior experience with Vue.js), then perhaps read the Quasar documentation for yourself and explore all the things you can do or create with this exciting new framework!