Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

useMediaQuery API

API reference for the useMediaQuery composable.

Explore these related pages for additional context and usage patterns.

PageCategory
useMediaQuerySystem
useBreakpointsPlugins
useEventListenerSystem

Functions

useMediaQuery

(query: MaybeRefOrGetter<string>) => MediaQueryContext

Reactive media query matching.

usePrefersDark

() => MediaQueryContext

Check if the user prefers dark color scheme.

usePrefersReducedMotion

() => MediaQueryContext

Check if the user prefers reduced motion.

usePrefersContrast

() => MediaQueryContext

Check if the user prefers more contrast.

Properties

matches

Readonly<ShallowRef<boolean>>

Whether the media query currently matches

query

Readonly<Ref<string, string>>

The current media query string

mediaQueryList

Readonly<ShallowRef<MediaQueryList | null>>

The underlying MediaQueryList (null on server)

Methods

stop

() => void

Stop listening and clean up

Was this page helpful?

Ctrl+/