Platform Detection     

Helpers are built-in to detect the Platform (and its capabilities) in which the code is running:

// For usage inside a Vue component JS:
this.$q.platform.is.mobile

// or usage inside a Vue component template:
$q.platform.is.cordova

// Only for usage outside a Vue component you need to import it:
import { Platform } from 'quasar'

NOTE
Running on mobile means you can have this code running on a mobile device (phone or tablet) but with a browser, not within a Cordova wrapper.

Other Platform.is specific properties:
android, blackberry, cros, ios, ipad, iphone, ipod, kindle, linux, mac, playbook, silk, chrome, opera, safari, win (Windows), winphone (Windows Phone) and more…

Example when running Chrome on a Linux desktop machine:

// Describing Platform.is
{
  chrome: true,
  desktop: true,
  linux: true,
  name: "chrome",
  platform: "linux",
  version: "47.0.2526.80",
  versionNumber: 47,
  webkit: true
}

Usage

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>

NOTE
Based on your needs, you might want to also check Design Helpers > Visibility page to see how you can achieve the same effect using CSS alone. This latter method will render your DOM elements or components regardless of platform though, so choose wisely on how you want to handle the performance of your app.

Note about SSR

When building for SSR, use only the $q.platform form. If you need to use the import { Platform } from 'quasar' (when on server-side), then you’ll need to do it like this:

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 App Plugins or preFetch feature where it is supplied as 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.