Nuxt · NUXT0069
Use useBreakpoints for responsive state
Finds VueUse project code that should use the supported useBreakpoints pattern instead.
Run this rule
pnpm nuxt doctor --rules vueuse/prefer-usebreakpoints
Why it matters
A one-time matchMedia() read does not stay reactive as the viewport changes; useBreakpoints() owns the media-query listeners and reactive state.
Recommended fix
Use VueUse useBreakpoints() for responsive state that stays reactive and testable.
Useful links
Example
Use VueUse breakpoints
Before
const isMobile = ref(matchMedia('(max-width: 640px)').matches)
After
const breakpoints = useBreakpoints({ mobile: 640 })
const isMobile = breakpoints.smaller('mobile')