fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.5 KiB
1.5 KiB
category
| category |
|---|
| Browser |
useMediaQuery
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.
Usage
import { useMediaQuery } from '@vueuse/core';
const isLargeScreen = useMediaQuery('(min-width: 1024px)');
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)');
Server Side Rendering and Nuxt
If you are using useMediaQuery with SSR enabled, then you need to specify which screen size you would like to render on the server and before hydration to avoid an hydration mismatch
import { useMediaQuery } from '@vueuse/core';
const isLarge = useMediaQuery('(min-width: 1024px)', {
ssrWidth: 768, // Will enable SSR mode and render like if the screen was 768px wide
});
console.log(isLarge.value); // always false because ssrWidth of 768px is smaller than 1024px
onMounted(() => {
console.log(isLarge.value); // false if screen is smaller than 1024px, true if larger than 1024px
});
Alternatively you can set this up globally for your app using provideSSRWidth
Type Declarations
/**
* Reactive Media Query.
*
* @see https://vueuse.org/useMediaQuery
* @param query
* @param options
*/
export declare function useMediaQuery(
query: MaybeRefOrGetter<string>,
options?: ConfigurableWindow & {
ssrWidth?: number;
},
): ComputedRef<boolean>;