assignment_late
Why donate
travel_explore
API Explorer
code
How to contribute
style
Style & Identity
view_quilt
Layout and Grid
widgets
Vue Components
swap_calls
Vue Directives
extension
Quasar Plugins
developer_mode
Vue Composables
security
Security
build
Quasar CLI (with Vite)
build
Quasar CLI (with Webpack)
stars
Icon Genie CLI
healing
Quasar Utils
note_add
App Extensions
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
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu