Getting Started - Installation     

If you want to learn what Quasar is and what it can do for you, read the Introduction to Quasar. Otherwise, let’s get started and choose how you want to use Quasar:

Here’s a comparison:

FeatureUMDStarter KitVue 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 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 Upgrade Guide.

UMD / Standalone (uses CDN)

If you want 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 a helper UMD starter kit which will show you how to get started and what CSS and JS tags to include into your project. It 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 on how to use CDN to add Quasar:

# make sure you have vue-cli globally installed
# Node.js >= 8.9.0 is required.
$ npm install -g vue-cli

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

And you’re done. Inspect 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 out.

Now head on to read about UMD/Standalone.

If you want to be able to build:

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

# make sure you have vue-cli globally installed
$ npm install -g vue-cli

# Node.js >= 8.9.0 is required.
$ npm install -g quasar-cli

Then we create a project folder with Quasar CLI:

$ quasar init <folder_name>

Note that you don’t need separate starter kits if you want to build any of the options described above. This one can seamlessly handle all of them.

Now head on to read about Main Starter Kit and also familiarize yourself with the Quasar CLI.

Vue CLI 3 plugin

Make sure you have vue-cli 3.x.x:

vue --version

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

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

It will ask you if you want the plugin to replace some existing files. It is recommended that you do it 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. Most important property is theme (with possible values “mat” or “ios”), which you can later change should you want.