Display & Platform
The display composable provides a multitude of information about the current device
Usage
The useDisplay composable provides information on multiple aspects of the current device.
This enables you to control various aspects of your application based upon the window size, device type, and SSR state. This composable works in conjunction with gridsand other responsive utility classes (e.g. display).
The following shows how to access the application’s display information:
<script setup>
import { onMounted } from 'vue'
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
onMounted(() => {
console.log(mobile.value) // false
})
</script>
If you are still using the Options API, you can access the display information on the global $vuetify variable. Note that refs are unwrapped here, so you don’t need .value
.
<script>
export default {
mounted () {
console.log(this.$vuetify.display.mobile)
},
}
</script>
Device | Code | Type | Range |
---|---|---|---|
Extra small | xs | Small to large phone | < 600px |
Small | sm | Small to medium tablet | 600px > < 960px |
Medium | md | Large tablet to laptop | 960px > < 1280px |
Large | lg | Laptop to desktop | 1280px > < 1920px |
Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px |
Extra extra large | xxl | 4k and ultra-wide | > 2560px |
Specification |
API
Component | Description |
---|---|
useDisplay | Composable |
Options
The useDisplay composable has several configuration options, such as the ability to define custom values for breakpoints.
For example, the thresholds option modifies the values used for viewport calculations. The following snippet overrides thresholds values xs through lg and sets mobileBreakpoint to sm
.
import { createVuetify} from 'vuetify'
export default createVuetify({
display: {
mobileBreakpoint: 'sm',
thresholds: {
xs: 0,
sm: 340,
md: 540,
lg: 800,
xl: 1280,
},
},
})
The mobileBreakpoint option accepts numbers and breakpoint keys.
Examples
In the following example, we use a switch statement and the current breakpoint name to modify the height property of the v-cardcomponent:
<template>
<v-card :height="height">
...
</v-card>
</template>
<script setup>
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
const { name } = useDisplay()
const height = computed(() => {
// name is reactive and
// must use .value
switch (name.value) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
case 'xxl': return 1200
}
return undefined
})
</script>
Interface
{
// Breakpoints
xs: boolean
sm: boolean
md: boolean
lg: boolean
xl: boolean
xxl: boolean
smAndDown: boolean
smAndUp: boolean
mdAndDown: boolean
mdAndUp: boolean
lgAndDown: boolean
lgAndUp: boolean
xlAndDown: boolean
xlAndUp: boolean
// true if screen width < mobileBreakpoint
mobile: boolean
mobileBreakpoint: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
// Current breakpoint name (e.g. 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl')
name: string
// The current value of window.innerHeight and window.innerWidth
height: number
width: number
// Device userAgent information
platform: {
android: boolean
ios: boolean
cordova: boolean
electron: boolean
chrome: boolean
edge: boolean
firefox: boolean
opera: boolean
win: boolean
mac: boolean
linux: boolean
touch: boolean
ssr: boolean
}
// The values used to make Breakpoint calculations
thresholds: {
xs: number
sm: number
md: number
lg: number
xl: number
xxl: number
}
}
Using Setup
Use the useDisplay composable alongside Vue 3’s setup
function to harness the power of the Composition API. In this example we show how to toggle the fullscreen property of v-dialog
when the mobile breakpoint is active.
<template>
<v-dialog :fullscreen="mobile">
...
</v-dialog>
</template>
<script setup>
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
</script>
Breakpoint conditionals
Breakpoint and conditional values return a boolean
that is derived from the current viewport size. Additionally, the breakpoint composable follows the Vuetify Gridnaming conventions and has access to properties such as xlOnly, xsOnly, mdAndDown, and many others. In the following example we use the setup
function to pass the xs and mdAndUp values to our template:
<template>
<v-sheet
:min-height="mdAndUp ? 300 : '20vh'"
:rounded="xs"
>
...
</v-sheet>
</template>
<script setup>
import { useDisplay } from 'vuetify'
// Destructure only the keys you want to use
const { xs, mdAndUp } = useDisplay()
</script>
Using the dynamic display values, we are able to adjust the minimum height of v-sheetto 300
when on the medium breakpoint or greater and only show rounded corners on extra small screens:
Component Mobile Breakpoints
Some components within Vuetify have a mobile-breakpoint property which allows you to override the default value. These components reference the global mobileBreakpoint value that is generated at runtime using the provided options in the vuetify.js
file. By default, mobileBreakpoint is set to md
, which means that if the window is less than 1280 pixels in width (which is the default value for the md threshold), then the useDisplay composable will update its mobile value to true
.
For example, the v-bannercomponent implements different styling based upon the value of mobile on the useDisplay composable. In the following example, The first banner uses the global mobile-breakpoint value of md
while the second overrides this default with 580
. If the screen width is 1024 pixels, the second banner would not convert into its mobile state:
<template>
<div>
<v-banner>
...
</v-banner>
<v-banner mobile-breakpoint="580">
...
</v-banner>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useDisplay } from 'vuetify'
const { width, mobile } = useDisplay()
onMounted(() => {
console.log(width.value) // 960
console.log(mobile.value) // true
})
</script>