Helpers are built into Quasar to detect the Platform (and its capabilities) within the context of which the code is running.

Usage

Usage inside a Vue component JS:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.platform.is.mobile
}

Usage inside a Vue component template:

$q.platform.is.cordova

You must import it when you use it outside of a Vue component :

import { Platform } from 'quasar'

Platform.is by itself returns an object containing details about the current platform. For example when running Chrome on a MacOS desktop machine, Platform.is would return something similar to:

{
  chrome: true,
  desktop: true,
  mac: true,
  name: "chrome",
  platform: "mac",
  version: "70.0.3538.110",
  versionNumber: 70,
  webkit: true
}

Now, let’s say we want to render different components or DOM elements, based on the platform that the code is running under. We want to show something on desktop and something else on mobile. We would proceed like this:

<div v-if="$q.platform.is.desktop">
  I'm only rendered on desktop!
</div>

<div v-if="$q.platform.is.mobile">
  I'm only rendered on mobile!
</div>

<div v-if="$q.platform.is.electron">
  I'm only rendered on Electron!
</div>

Properties

The following properties are available to the Platform object. It’s not an exhaustive list though. See the API section below for more details.

Note about SSR

When building for SSR, use only the $q.platform form. Alternatively, when on server-side, this is one more example of how you can use it:

import { Platform } from 'quasar'

// you need access to `ssrContext`
function (ssrContext) {
  const platform = process.env.SERVER
    ? Platform.parseSSR(ssrContext)
    : Platform // otherwise we're on client

  // platform is equivalent to the global import as in non-SSR builds
}

The ssrContext is available in @quasar/app-vite Boot File or @quasar/app-webpack Boot File. And also in the @quasar/app-vite preFetch or @quasar/app-webpack preFetch feature, where it is supplied as a parameter.

The reason for all this is that in a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same: each request should have a fresh, isolated app instance so that there is no cross-request state pollution. So Platform needs to be bound to each request separately.