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:

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

NOTEBased 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:

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.