The $q object

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

Prop name	Type	Description
`$q.version`	String	Quasar version.
`$q.platform`	Object	Same object as Platform import from Quasar.
`$q.screen`	Object	Object supplied by Screen Plugin.
`$q.lang`	Object	Quasar 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.iconSet`	Object	Quasar 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.cordova`	Object	Reference to Cordova global object. Available only when running under a Cordova app.
`$q.capacitor`	Object	Reference 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)

Caught a mistake?Edit this page in browser

1. Introduction

2. Usage

2.1. Composition API with “script setup”

2.2. Composition API without “script setup”

2.3. Options API

2.4. Outside of a .vue file