The Quasar Method

Make your Vue.js project fast, cheap and good!

The Quasar Framework is a node.js based collection of tools for developing and publishing a website; for building and optimising a progressive web-app; a way to make native apps for Linux, MacOS and Windows with Electron; and even a system for creating mobile apps for Android and iOS with Cordova. It does all of this from one code base using tricks of the trade, best-practices and for all intents and purposes it really gives development teams super-powers.

Image for post
Image for post
Interdependencies between QComponents

Still a tightly kept secret in the industry, the Quasar command-line-interface leverages Evan You’s Vue 2 : “a progressive framework for building user interfaces” and produces distributable artifacts from one set of code using a Webpack-4 hot-reloading development server, Babel-7 transpiling, eslint code linting, ES6 constructs and stylus css preprocessing. Out of the box it offers 117 custom components, 9 directives and 13 plugins, all of which adhere to the Material Design specification.

Do things once, do them well and do it now.

Let’s assume you are pressed for time and just want to make a quick POC multi-platform app to showoff Quasar’s color-picker component and two-way binding with Vue using the whole Quasar Kitchensink: a Single Page Application (SPA— like a classical website), a Progressive Web App (PWA) a native app (with Electron) for Windows, Mac and Linux as well as an app (via Cordova) for Android and iOS. Then, once you have all that stuff built, you are going to need to

Quasar just built you a website, a PWA, electron apps (mac, windows and linux) and mobile apps (Android and iOS). Read on for more insight into each of these commands.

Although Quasar makes it simple, you have to make sure that your development environment embodies all of the requirements needed to properly execute quasar-cli. This is doubly true if you are doing anything with Cordova. You can find detailed instructions about the setup in our docs. Everything here (with the obvious exception of publishing to the Mac and iOS stores) will work for you on all major platforms: Linux, MacOS and Windows.

Image for post
Image for post
Console feedback after answering the setup questions.

This command will create a new project folder for you at outoftime, scaffold it with all of the folders and files needed for a bare-bones project and initialize a package.json file. Of special note is the /outoftime/quasar.conf.js file, as its object contains the configurations you will need to add components, plugins, theme overrides etc.

Change into your new folder and start the development server. When the webpack dev server starts up it spends a little extra time to create fresh versions of all of the cache files it needs to build a server. After it has finished webpack will automatically open a browser tab and show you what it built:

Image for post
Image for post

This is the stock “smoke test” of the Quasar Framework. If you do not see this page after running quasar dev, then something is wrong. Now we can get to work changing the source to say “Out of Time” in the Header bar and show a color picker that you can use to change the address bar color. So the first thing to do is to edit quasar.conf.js and tell Quasar to import the QColorPicker component by adding it to the list of components.

Then we’ll edit the /outoftime/src/layouts/default.vue file:

As soon as you save the new default.vue file, webpack sees that there has been a change and assuming your work passes all of the ESlint tests, you should see the following in the browser:

Image for post
Image for post

Move the slider or the “picker circle” and the address bar color will change accordingly. Great. Now lets build the project so you can host it as a website.

Image for post
Image for post
Image for post
Image for post

Now you just have to serve that folder somehow, for example with http-server.

Now visit your localhost:8080 and you should see the exact same thing as the webpack dev server showed you.

Image for post
Image for post
Image for post
Image for post

Now you just have to serve that folder somehow, for example with http-server.

Now visit your localhost:8080 and you should see the exact same thing as the webpack dev server showed you — as opposed to the SPA mode, now you have a Progressive Web App.

So you want to have your color-picker available as a native app for all desktop versions. Easy:

Image for post
Image for post

If you haven’t done this before, the latest electron binaries for the respective platforms will be downloaded. This is a screenshot of the MacOS app:

Image for post
Image for post

Since Electron was so easy, why not just make the little color-picker as a Cordova app for iOS and Android. Guess what? Except that you have to run it in two steps, it is just as easy:

Image for post
Image for post

That wraps it up. In this article you saw how mind-numbingly simple Quasar makes it for you to create SPA, PWA, Electron, Cordova and SSR app from a single vue.js codebase.

For your information, this code for this article was originally written using quasar-cli v0.16.4 and I have just published the accompanying project as a git repo. To use it git clone as usual, cd into the directory and run npm install or yarn, and then

quasar dev

Image for post
Image for post

If you want to find out more about the Quasar-Framework and its method, please consider:

Quasar Framework

Build high-performance cross-device VueJS user interfaces…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store