Upgrade toQuasar v2and use Vue.js 3
Screen Plugin

The Quasar Screen plugin allows you to have a dynamic and responsive UI when dealing with your Javascript code. When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.



You don’t need to do anything. The Screen plugin gets installed automatically.


Notice $q.screen below. This is just a simple usage example.

<q-list :dense="$q.screen.lt.md">
    <q-item-section>John Doe</q-item-section>

    <q-item-section>Jane Doe</q-item-section>
// script part of a Vue component
export default {
  computed: {
    buttonColor () {
      return this.$q.screen.lt.md
        ? 'primary'
        : 'secondary'

We can also use the Screen plugin outside of a Vue component:

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md
// Screen.name ('xs', 'sm', ...; Quasar v1.5.2+)

Body classes

If you enable it (see how to do it after the examples below), you can also style your content based on a particular set of CSS classes applied to document.body: screen--xs, screen--sm, …, screen-xl.

body.screen--xs {
  .my-div {
    color: #000;

body.screen--sm {
  .my-div {
    color: #fff;

Or a sexy variant in Sass or Stylus:

  body.screen--xs &
    color: #000
  body.screen--sm &
    color: #fff

How to enable body classes

In order to enable the behavior above, edit your /quasar.conf.js file like below. Please note that this will increase a bit the time for First Meaningful Paint.

// file: /quasar.conf.js
// with Quasar v1.5.3+

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this


There are a few methods that can be used to tweak how Screen plugin works:

setSizes(Object)Change window breakpoints; does NOT also changes CSS breakpoints.setSizes({ lg: 1024, xl: 2000 })
setDebounce(Number)Change the default 100ms debounce to some other value.setDebounce(500) // 500ms


// inside a Vue component:
this.$q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

// outside of a Vue component:
import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })