mosaicstack/stack
25
0
Fork 1
Code Issues 344 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
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.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/vueuse-functions/references/useMediaQuery.md
+11 -11
View File
@@ -9,10 +9,10 @@ Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Qu
## Usage
```ts
import { useMediaQuery } from '@vueuse/core'
import { useMediaQuery } from '@vueuse/core';
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
const isLargeScreen = useMediaQuery('(min-width: 1024px)');
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)');
```
#### Server Side Rendering and Nuxt
@@ -20,16 +20,16 @@ const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
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
```ts
import { useMediaQuery } from '@vueuse/core'
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
})
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
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
})
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`](../useSSRWidth/index.md)
@@ -47,7 +47,7 @@ Alternatively you can set this up globally for your app using [`provideSSRWidth`
export declare function useMediaQuery(
query: MaybeRefOrGetter<string>,
options?: ConfigurableWindow & {
ssrWidth?: number
ssrWidth?: number;
},
): ComputedRef<boolean>
): ComputedRef<boolean>;
```