Nuxt · Hydration & SSR
NUXT0069Use useBreakpoints for responsive state
Finds VueUse project code that should use the supported useBreakpoints pattern instead.
vite-doctor/vueusehydrationinfoSuggestion
Why it happens
A one-time matchMedia() read does not stay reactive as the viewport changes; useBreakpoints() owns the media-query listeners and reactive state.
Fix
Use VueUse useBreakpoints() for responsive state that stays reactive and testable.
Example
Use VueUse breakpoints
Before
const isMobile = ref(matchMedia('(max-width: 640px)').matches)
After
const breakpoints = useBreakpoints({ mobile: 640 })
const isMobile = breakpoints.smaller('mobile')
Verify the fix
Run only this rule after editing so the report stays focused on the diagnostic you are closing:
pnpm nuxt doctor --rules vueuse/prefer-usebreakpoints