[Integration] useMediaQuery system composable

[johnleider]

Summary

Integration improvements for useMediaQuery with the v0 system.

Research Findings

v0 Implementation (New Capability)

Core Features:

• Reactive Queries: Static strings or dynamic getters
• SSR Safety: Returns false during server-side rendering
• Hydration-Aware: Defers matchMedia until hydration completes
• MediaQueryList Exposure: Direct access for advanced use
• Convenience Helpers: usePrefersDark(), usePrefersReducedMotion(), usePrefersContrast()

API:

const { matches, query, mediaQueryList, stop } = useMediaQuery(
  () => `(min-width: ${width.value}px)`
)

Vuetify 3 Comparison

Vuetify 3 does NOT have a direct useMediaQuery composable.

Uses useDisplay() for viewport dimensions only.

Aspect	v0 useMediaQuery	V3 useDisplay
Scope	Any CSS media query	Viewport dimensions
Reactivity	Per-query, composable-scoped	Centralized, app-wide
Hydration	Explicit guard	useSsrBoot()
Color scheme	✅ usePrefersDark()	❌ Manual matchMedia
Reduced motion	✅ usePrefersReducedMotion()	❌ Manual matchMedia

Use Cases for Vuetify 3

// Theme system - detect OS preference
const { matches: prefersDark } = useMediaQuery('(prefers-color-scheme: dark)')

// Accessibility - respect motion preferences
const { matches: reducedMotion } = usePrefersReducedMotion()

// Device capabilities
const { matches: canHover } = useMediaQuery('(hover: hover)')
const { matches: isLandscape } = useMediaQuery('(orientation: landscape)')

Integration Points

• Foundation for useBreakpoints
• Integration with theme for prefers-color-scheme
• SSR safety via useHydration
• Document as complement to useDisplay()
• Add to VTheme for system theme detection

Status

✅ Production-ready - New capability not in V3