Quasar UMD - CDN install

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.

Installation

UMD is all about adding Quasar style and javascript tags. Please select what you will be using and check out the output below it.

WARNING

You can use both Fontawesome v5 and v6 web fonts at the same time. Refer to their Upgrade Guide for more information.

Roboto font

Animate.css

English (US)

Quasar Language Pack

Material (webfont)

Quasar Icon Set

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.22.10")
  -->

  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.22.10/dist/quasar.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <!-- Add the following at the end of your body tag -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.22.10/dist/quasar.umd.min.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {}
        },
        methods: {},
        // ...etc
      })
    </script>
  </body>
</html>

WARNING

Please notice the <!DOCTYPE html> at the beginning of the document. Do not forget to add it, or else some browsers (notably Safari) will use some compatibility mode that breaks flex.
If you are using an RTL Quasar language pack (eg. Hebrew) then toggle the “RTL CSS support” above too!
Do NOT use self-closing tags, like <q-icon ... />. Instead, go with <q-icon ...></q-icon>.

TIP

All components, directives and Quasar plugins are ready to be used out of the box. There is no need for additional code to install them. Just make sure that you will NOT be using self-closing tags.

JsFiddle / Codepen

You can fork and use these links for reporting issues on GitHub too:

Supplier	URL
jsFiddle	https://jsfiddle.net/rstoenescu/rmaodk0f
Codepen	https://codepen.io/rstoenescu/pen/VgQbdx

These links (obviously) use the Quasar UMD version.

Quasar Global Object

When you embed Quasar UMD into a webpage you’ll get a Quasar global Object injected:

Quasar = {
  version, // Quasar version

  plugins, // Quasar plugins
  utils, // Quasar utils

  // if you want to extend Quasar's components or directives
  components,
  directives,

  // if you want to change current icon set or Quasar Language pack
  // (must include CDN links so they are available first!)
  lang,
  iconSet
}

Init Configuration

There are some configuration options for Quasar & Quasar plugins. For the Quasar UMD version you can define the following before including the Quasar script tag:

<script>
  // optional
  window.quasarConfig = {
    brand: { // this will NOT work on IE 11
      primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more
  }
</script>

Usage

So, after you figured out the CDN links that you need to embed into your webpages (hopefully you’ve inspected the project folder created by UMD demo kit), now it’s time to use Quasar.

TIP

You’ll notice that all the Quasar Components, Quasar Directives and Quasar Plugins have an installation section at the top of their pages.

By using the UMD version, you’ll have all of the components, directives and Quasar plugins already installed for you. You just need to start using them.

Do not use self-closing tags with the UMD version: You will notice that you won’t be able to use the self-closing tag form of any of the components. You must close all components tags.

<!-- In docs, but for Quasar CLI usage -->
<q-btn label="My Button" />
<!-- ^^^ can't use it like this on UMD -->

<!-- Instead, include a self-closing tag too: -->
<q-btn label="My Button"></q-btn>

Quasar Components

An example. No need to install any component in UMD version.

<q-btn label="My Button"></q-btn>

Quasar Directives

An example. No need to install any directives in UMD version.

<div v-ripple>...</div>

Quasar Plugins

An example. No need to install any plugins in UMD version.

Quasar.plugins.bottomSheet.create({...})

Quasar Utils

Some usage examples:

Quasar.utils.colors.getBrand('primary')
Quasar.utils.openURL('https://quasar.dev')
Quasar.utils.debounce(fn, 200)
Quasar.utils.is.deepEqual(objA, objB)
Quasar.QBtn
Quasar.Notify.create('Hi and welcome!')

Changing Quasar Icon Set

Assuming you have already included the CDN link to your favorite Quasar Icon Set (unless you’re using Material Icons which is used by default), you can then tell Quasar to use it:

Quasar.iconSet.set(Quasar.iconSet.fontawesomeV6)

The list of available Quasar Icon Sets can be found on GitHub.

Changing Quasar Language Pack

Assuming you have already included the CDN link to your desired Quasar I18n Language (unless you want “en-us” language pack which is used by default), you can then tell Quasar to use it:

// example setting German language,
// using ISO 2 letter code:
Quasar.lang.set(Quasar.lang.de)

// example setting Portuguese (Brazil) language:
Quasar.lang.set(Quasar.lang.ptBr)

The list of available languages can be found on GitHub. If your desired language pack is not available yet, you can help by providing a PR. We welcome any languages!

Ready for more?