useMediaQuery

Category

Browser

Export Size

455 B

Last Changed

2 months ago

Reactive Media Query. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

Demo

source

isLargeScreen: true
prefersDark: false

Anthony Fu

Antério Vieira

Anthony Fu

IlyaL

James Garbutt

Fernando Fernández

Adrien Foulon

Alex

Indrek Ardel

Zhousg

Young

Jelf

Dominik Freier

webfansplz

Eureka

karma

Alex Kozack

Jacob Clevenger

Changelog

v12.8.0 on 3/5/2025

7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)

v12.5.0 on 1/22/2025

c6c6e - feat: use useEventListener where it was not being used (#4479)

v12.3.0 on 1/2/2025

59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native

v12.1.0 on 12/22/2024

55965 - feat(useSSRWidth): add optional support for SSR in useMediaQuery and useBreakpoints (#4317)

3af75 - fix: the return value should be computed (#4403)

v12.0.0-beta.1 on 11/21/2024

0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

v10.3.0 on 7/30/2023

f3969 - fix: only add/remove event listeners on query change (#3236)

v10.0.0-beta.4 on 4/13/2023

4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

10e98 - feat(toRef)!: rename resolveRef to toRef

v10.0.0-beta.3 on 4/12/2023

4e7b0 - fix(useWindowSize)!: use media query instead of orientationchange listener (#2919)