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