Why donate
API Explorer
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)