VueUseuseMediaQuery
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
isLargeScreen: false
prefersDark: false
Usage
js
import { useMediaQuery } from '@vueuse/core'
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
import { useMediaQuery } from '@vueuse/core'
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
Type Declarations
typescript
/**
* Reactive Media Query.
*
* @see https://vueuse.org/useMediaQuery
* @param query
* @param options
*/
export declare function useMediaQuery(
query: MaybeComputedRef<string>,
options?: ConfigurableWindow
): Ref<boolean>
/**
* Reactive Media Query.
*
* @see https://vueuse.org/useMediaQuery
* @param query
* @param options
*/
export declare function useMediaQuery(
query: MaybeComputedRef<string>,
options?: ConfigurableWindow
): Ref<boolean>
Source
Contributors
Anthony Fu
Antério Vieira
Young
Jelf
Dominik Freier
webfansplz
Eureka
karma
Alex Kozack
Jacob Clevenger