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.