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.
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
tl;dr
$ quasar init outoftime
$ quasar dev
$ quasar build
$ quasar build -m pwa
$ quasar build -m electron --target all --bundler builder
$ quasar build -m cordova -T android
$ quasar build -m cordova -T iosQuasar 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.
QUASAR INIT
$ quasar init outoftime
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.
QUASAR DEV
$ cd outoftime
$ quasar devChange 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:
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.
framework: {
components: [
'QColorPicker',
...
]
}Then we’ll edit the /outoftime/src/layouts/default.vue file:
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar color="primary">
<q-toolbar-title>
Out of Time Color Picker
<div slot="subtitle">
Running on Quasar v{{ $q.version }}
</div>
</q-toolbar-title>
</q-toolbar>
</q-layout-header>
<q-page-container>
<q-color-picker v-model="modelHex" class="absolute-center"/>
</q-page-container>
</q-layout>
</template><script>
import { colors } from 'quasar'
export default {
data: () => ({
modelHex: '#C7044B'
}),
watch: {
modelHex: {
handler (val, oldVal) {
colors.setBrand('primary', val)
},
immediate: true
}
}
}
</script>
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:
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.
QUASAR BUILD
$ quasar build
Now you just have to serve that folder somehow, for example with http-server.
$ http-server dist/spa-mat/Now visit your localhost:8080 and you should see the exact same thing as the webpack dev server showed you.
QUASAR BUILD PWA
$ quasar build -m pwa
Now you just have to serve that folder somehow, for example with http-server.
$ http-server dist/pwa-mat/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.
QUASAR BUILD ELECTRON
So you want to have your color-picker available as a native app for all desktop versions. Easy:
$ quasar build -m electron --target all --bundler builder
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:
QUASAR BUILD CORDOVA
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:
$ quasar build -m cordova --target ios
$ quasar build -m cordova --target android
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 …
If you want to find out more about the Quasar-Framework and its method, please consider:
