Getting Started - Installation     

If you would like to learn what Quasar is all about and what it can do for you, read the Introduction to Quasar. Otherwise, let’s get started by choosing how you’d like to use Quasar. There are three methods for using Quasar:

Here’s a comparison:

FeatureUMDQuasar CLIVue CLI 3 Plugin
Ability to embed into an existing projectYes-Yes, if it is Vue CLI app
Progressive integration of QuasarYes--
Ability to serve Quasar from CDNYes--
Build SPA, PWAYesYesYes
Build SSR (+ optional PWA client takeover)-Yes??
Build Mobile Apps, Electron AppsYesYes-
Dynamic RTL support for Quasar componentsYesYesYes
Generating your own website/app RTL equivalent CSS rules automatically by Quasar-YesYes
Take advantage of Quasar CLI for a stellar developer experience-Yes-
Tree Shaking-YesYes
SFC (Single File Component - for Vue)-YesYes
Advanced configuration through dynamic quasar.conf.js-Yes-
Unit & end to end testing-Not yetYes

If you are upgrading from previous Quasar versions, check the Upgrade Guide.

UMD / Standalone (uses CDN)

If you’d like to embed Quasar into your existing website project, integrating it in a progressive manner, then go for the UMD/Standalone (Unified Module Definition) version. There is a helper UMD starter kit, which will show you how to get started and what CSS and JS tags to include into your project. While installing the UMD kit, the CLI will ask you some questions (what Quasar theme will you be using, what Quasar I18n to include, …) and it will generate a simple HTML file that will demo how to use CDN to add Quasar:

# make sure you have @vue-cli (Vue CLI 3.0) globally installed
# Node.js >= 8.9.0 is required.

$ npm install -g vue-cli # or @vue/cli @vue/cli-init // recommended
# or:
$ yarn global add vue-cli # or @vue/cli @vue/cli-init

# then...
$ vue init quasarframework/quasar-starter-kit-umd <folder_name>

And you’re done. Inspect the index.html file that was created in the new folder and learn how you can embed Quasar. You may want to repeat the step above to experiment with different setups based on the answers you give.

Now head on to read about UMD/Standalone.

Development with Quasar CLI (The best developer experience)

If you want to be able to build:

…then go for the best developer experience:

First, we will need to install Quasar CLI. Make sure you have Node >=8 and NPM >=5 or Yarn installed on your machine.

# remove old quasar-cli package if you have it
$ npm uninstall -g quasar-cli

# install the latest cli
$ npm install -g @quasar/cli

With Quasar CLI globally installed, we can now create a new project:

$ quasar create <folder_name> -b v0.17

Note that you don’t need different projects, in order to build any one of the application options described above. This one project folder can seamlessly handle all of them.

To understand more about Quasar CLI, be sure to familiarize yourself with the guide. With this knowledge under your belt, you’ll be able to take full advantage of all of Quasar CLI’s many great features.

Vue CLI 3 plugin

To work with Quasar via a Vue CLI plugin, you will need to make sure you have vue-cli 3.x.x installed globally. To make sure you have Vue CLI 3.0, use this command:

$ vue --version

You should see something like:

$ vue --version

Should you have Vue CLI 2.x.x. installed, you’ll need to uninstall it with:

$ npm uninstall -g vue-cli
# or:
$ yarn global remove vue-cli

and then install Vue CLI 3.0 as follows:

$ yarn global add @vue/cli
# or:
$ npm install -g @vue/cli // recommended

If you don’t yet have a project created with vue-cli 3.x, then do so with:

$ vue create my-app

Navigate to the newly created project folder and add the cli plugin. Before installing it, make sure to commit your current changes should you wish to revert them later.

$ cd my-app
$ vue add quasar

The CLI will ask you if you want the plugin to replace some existing files. It is recommended that you do this, if you wish to have an example, so you can quickly develop your app.

Your Vue config (in package.json or vue.config.js file, depending on what you chose when you created your vue app) will also contain a quasar object. The most important property is theme (with possible values “mat” or “ios”), which you can later change, if you’d like.