The $q object

Quasar supplies a $q object that you can use for various purposes. You will notice it throughout the docs.

Prop nameTypeDescription
$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.capacitorObjectReference to Capacitor global object. Available only when running under a Capacitor app.

Usage

The following sections will teach you how to use it in .vue files (with both Composition API and Options API) and outside of them.

Composition API with <script setup>

The following is a .vue file:

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

<script setup>
import { useQuasar } from 'quasar'

const $q = useQuasar()

console.log($q.platform.is.ios)

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

Composition API without <script setup>

The following is a .vue file:

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

<script>
import { useQuasar } from 'quasar'

export default {
  setup () {
    const $q = useQuasar()

    console.log($q.platform.is.ios)

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

    return {
      show
    }
  }
}
</script>

Options API

The following is a .vue file:

<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>

Outside of a .vue file

import { Quasar, Platform } from 'quasar'

console.log(Quasar.version)
console.log(Platform.is.ios)