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.

Installation

// quasar.conf.js

framework: {
plugins: ['Screen']
}

Basic Usage

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

<q-list :dense="$q.screen.lt.md" :sparse="$q.screen.gt.lg">
<q-item>
<q-item-main label="John Doe" />
</q-item>
<q-item>
<q-item-main label="Jim Doe" />
</q-item>
</q-list>
// script part of a Vue component
export default {
computed: {
buttonColor () {
return this.$q.screen.lt.md
? 'primary'
: 'secondary'
}
}
}

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

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md

Configuration

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

MethodDescriptionExample
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

Examples:

// 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 })