Vue Prototype Injections

Quasar injects Vue prototype with $q object:

InjectionTypeDescription
$q.versionStringQuasar version.
$q.platformObjectSame object as Platform import from Quasar.
$q.screenObjectObject supplied by Screen Plugin.
$q.langObjectQuasar Language pack management, containing labels etc (one of lang files). Designed for Quasar components, but you can use it in your app components too. More info: Quasar Language Packs.
$q.iconSetObjectQuasar icon set management (one of icon set files). Designed for Quasar components, but you can use it in your app components too. More info: Quasar Icon Sets.
$q.cordovaObjectReference to Cordova global object. Available only when running under a Cordova app.
$q.capacitorObject(@quasar/app v1.2+) Reference to Capacitor global object. Available only when running under a Capacitor app.
$q.electronObjectReference to Electron global object. Available only when running under an Electron app and if Node Integration is NOT turned off.

Example

You can use it globally inside a Vue context (component script or template) like this:

<!-- inside a Vue template -->
<template>
  <div>
    <div v-if="$q.platform.is.ios">
      Gets rendered only on iOS platform.
    </div>
  </div>
</template>

<script>
// not available here outside
// of the export

export default {
  // inside a Vue component script
  ...,

  // showing an example on a method, but
  // can be any part of Vue script
  methods: {
    show () {
      // prints out Quasar version
      console.log(this.$q.version)
    }
  }
}
</script>