Documentation Index
Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The useDisplay() composable provides access to Vuetify’s display system, offering reactive breakpoint information, viewport dimensions, and platform detection.
Import
import { useDisplay } from 'vuetify'
Signature
function useDisplay(
props?: DisplayProps,
name?: string
): DisplayInstance & { mobile: Ref<boolean>, displayClasses: Ref<Record<string, boolean>> }
interface DisplayProps {
mobile?: boolean | null
mobileBreakpoint?: number | DisplayBreakpoint
}
type DisplayBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
Parameters
props
DisplayProps
default:"{ mobile: null }"
Optional display configurationOverride mobile detection
props.mobileBreakpoint
number | DisplayBreakpoint
Custom mobile breakpoint threshold
Component name for CSS classes (auto-detected if not provided)
Return Value
Breakpoint Flags
Range Flags
Viewport Properties
Current breakpoint name (‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, or ‘xxl’)
Current viewport width in pixels
Current viewport height in pixels
Whether the current viewport is considered mobile (based on mobileBreakpoint)
mobileBreakpoint
Ref<number | DisplayBreakpoint>
The current mobile breakpoint threshold
Object containing all breakpoint threshold values
Platform Detection
Object containing platform/browser detection flags:interface DisplayPlatform {
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
}
Methods
Manually update display values (useful for testing)
Default Thresholds
{
xs: 0,
sm: 600,
md: 840,
lg: 1145,
xl: 1545,
xxl: 2138
}
Usage Examples
Basic Breakpoint Detection
<script setup>
import { useDisplay } from 'vuetify'
const { xs, sm, md, lg, xl, xxl, mobile } = useDisplay()
</script>
<template>
<div>
<p v-if="mobile">Mobile view</p>
<p v-else>Desktop view</p>
<div v-if="xs">Extra small screen</div>
<div v-else-if="sm">Small screen</div>
<div v-else-if="md">Medium screen</div>
<div v-else-if="lg">Large screen</div>
<div v-else-if="xl">Extra large screen</div>
<div v-else>Extra extra large screen</div>
</div>
</template>
Responsive Layout
<script setup>
import { useDisplay } from 'vuetify'
const { mdAndUp, name } = useDisplay()
</script>
<template>
<v-container>
<v-row>
<v-col :cols="mdAndUp ? 6 : 12">
Column 1
</v-col>
<v-col :cols="mdAndUp ? 6 : 12">
Column 2
</v-col>
</v-row>
<p>Current breakpoint: {{ name }}</p>
</v-container>
</template>
Platform Detection
<script setup>
import { useDisplay } from 'vuetify'
const { platform } = useDisplay()
function getDeviceInfo() {
if (platform.value.android) return 'Android device'
if (platform.value.ios) return 'iOS device'
if (platform.value.mac) return 'macOS'
if (platform.value.win) return 'Windows'
return 'Unknown device'
}
</script>
<template>
<div>
<p>{{ getDeviceInfo() }}</p>
<p v-if="platform.touch">Touch device detected</p>
<p v-if="platform.chrome">Running in Chrome</p>
</div>
</template>
Custom Mobile Breakpoint
<script setup>
import { useDisplay } from 'vuetify'
// Consider mobile when width < 1024px
const { mobile } = useDisplay({ mobileBreakpoint: 1024 })
</script>
<template>
<v-app-bar :density="mobile ? 'compact' : 'default'">
<!-- App bar content -->
</v-app-bar>
</template>
Viewport Dimensions
<script setup>
import { useDisplay } from 'vuetify'
import { computed } from 'vue'
const { width, height } = useDisplay()
const aspectRatio = computed(() =>
(width.value / height.value).toFixed(2)
)
</script>
<template>
<div>
<p>Width: {{ width }}px</p>
<p>Height: {{ height }}px</p>
<p>Aspect Ratio: {{ aspectRatio }}</p>
</div>
</template>
Notes
- Automatically updates on window resize
- Values are reactive and can be used in computed properties
- Platform detection is based on user agent string
- Touch support is detected via browser capabilities
- In SSR context, defaults to mobile: false unless configured otherwise
See Also