[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"navigation_docs":3,"diagnostic-content-NUXT0069":44},[4,8,12,16,20,24,28,32,36,40],{"title":5,"path":6,"stem":7},"CLI","\u002Fcli","1.cli",{"title":9,"path":10,"stem":11},"Nuxt","\u002Fnuxt","2.nuxt",{"title":13,"path":14,"stem":15},"Vue","\u002Fvue","3.vue",{"title":17,"path":18,"stem":19},"Vite","\u002Fvite","4.vite",{"title":21,"path":22,"stem":23},"Nitro","\u002Fnitro","5.nitro",{"title":25,"path":26,"stem":27},"TypeScript","\u002Ftypescript","6.typescript",{"title":29,"path":30,"stem":31},"shadcn","\u002Fshadcn","7.shadcn",{"title":33,"path":34,"stem":35},"Package","\u002Fpackage","8.package",{"title":37,"path":38,"stem":39},"Extending Doctor","\u002Fextending","9.extending",{"title":41,"path":42,"stem":43},"Pinia","\u002Fpinia","9.pinia",{"id":45,"title":46,"body":47,"category":53,"code":303,"description":304,"docsUrl":54,"extension":305,"fix":306,"framework":307,"meta":308,"navigation":309,"pack":56,"path":310,"ruleId":57,"rulePath":58,"seo":311,"severity":59,"source":60,"sourceUrl":61,"stem":312,"why":313,"__hash__":314},"diagnostics\u002Fdiagnostics\u002FNUXT0069.md","NUXT0069: Use useBreakpoints for responsive state",{"type":48,"value":49,"toc":292},"minimark",[50,62,67,80,84,90,94,99,102,158,161,228,232,235,260,264,276,280,288],[51,52],"rule-metadata",{"category":53,"docsUrl":54,"fix":55,"pack":56,"ruleId":57,"rulePath":58,"severity":59,"source":60,"sourceUrl":61},"hydration","https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseBreakpoints\u002F#usage","suggestion","vite-doctor\u002Fvueuse","vueuse\u002Fprefer-usebreakpoints","\u002Fnuxt\u002Frules\u002Fhydration\u002Fprefer-usebreakpoints","info","src\u002Frule-packs\u002Fnuxt\u002Frules\u002Fvueuse.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fnuxt\u002Frules\u002Fvueuse.ts",[63,64,66],"h2",{"id":65},"why-it-happens","Why it happens",[68,69,70,71,75,76,79],"p",{},"A one-time ",[72,73,74],"code",{},"matchMedia()"," read does not stay reactive as the viewport changes; ",[72,77,78],{},"useBreakpoints()"," owns the media-query listeners and reactive state.",[63,81,83],{"id":82},"fix","Fix",[68,85,86,87,89],{},"Use VueUse ",[72,88,78],{}," for responsive state that stays reactive and testable.",[63,91,93],{"id":92},"example","Example",[95,96,98],"h3",{"id":97},"use-vueuse-breakpoints","Use VueUse breakpoints",[68,100,101],{},"Before",[103,104,109],"pre",{"className":105,"code":106,"language":107,"meta":108,"style":108},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const isMobile = ref(matchMedia('(max-width: 640px)').matches)\n","ts","",[72,110,111],{"__ignoreMap":108},[112,113,116,120,124,128,132,135,138,140,143,147,149,152,155],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"spNyl","const",[112,121,123],{"class":122},"sTEyZ"," isMobile ",[112,125,127],{"class":126},"sMK4o","=",[112,129,131],{"class":130},"s2Zo4"," ref",[112,133,134],{"class":122},"(",[112,136,137],{"class":130},"matchMedia",[112,139,134],{"class":122},[112,141,142],{"class":126},"'",[112,144,146],{"class":145},"sfazB","(max-width: 640px)",[112,148,142],{"class":126},[112,150,151],{"class":122},")",[112,153,154],{"class":126},".",[112,156,157],{"class":122},"matches)\n",[68,159,160],{},"After",[103,162,164],{"className":105,"code":163,"language":107,"meta":108,"style":108},"const breakpoints = useBreakpoints({ mobile: 640 })\nconst isMobile = breakpoints.smaller('mobile')\n",[72,165,166,200],{"__ignoreMap":108},[112,167,168,170,173,175,178,180,183,187,190,194,197],{"class":114,"line":115},[112,169,119],{"class":118},[112,171,172],{"class":122}," breakpoints ",[112,174,127],{"class":126},[112,176,177],{"class":130}," useBreakpoints",[112,179,134],{"class":122},[112,181,182],{"class":126},"{",[112,184,186],{"class":185},"swJcz"," mobile",[112,188,189],{"class":126},":",[112,191,193],{"class":192},"sbssI"," 640",[112,195,196],{"class":126}," }",[112,198,199],{"class":122},")\n",[112,201,203,205,207,209,212,214,217,219,221,224,226],{"class":114,"line":202},2,[112,204,119],{"class":118},[112,206,123],{"class":122},[112,208,127],{"class":126},[112,210,211],{"class":122}," breakpoints",[112,213,154],{"class":126},[112,215,216],{"class":130},"smaller",[112,218,134],{"class":122},[112,220,142],{"class":126},[112,222,223],{"class":145},"mobile",[112,225,142],{"class":126},[112,227,199],{"class":122},[63,229,231],{"id":230},"verify-the-fix","Verify the fix",[68,233,234],{},"Run only this rule after editing so the report stays focused on the diagnostic you are closing:",[103,236,240],{"className":237,"code":238,"language":239,"meta":108,"style":108},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm nuxt doctor --rules vueuse\u002Fprefer-usebreakpoints\n","bash",[72,241,242],{"__ignoreMap":108},[112,243,244,248,251,254,257],{"class":114,"line":115},[112,245,247],{"class":246},"sBMFI","pnpm",[112,249,250],{"class":145}," nuxt",[112,252,253],{"class":145}," doctor",[112,255,256],{"class":145}," --rules",[112,258,259],{"class":145}," vueuse\u002Fprefer-usebreakpoints\n",[63,261,263],{"id":262},"useful-links","Useful links",[265,266,267],"ul",{},[268,269,270],"li",{},[271,272,275],"a",{"href":54,"rel":273},[274],"nofollow","Upstream docs",[63,277,279],{"id":278},"related-rule","Related rule",[265,281,282],{},[268,283,284],{},[271,285,286],{"href":58},[72,287,57],{},[289,290,291],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":108,"searchDepth":202,"depth":202,"links":293},[294,295,296,300,301,302],{"id":65,"depth":202,"text":66},{"id":82,"depth":202,"text":83},{"id":92,"depth":202,"text":93,"children":297},[298],{"id":97,"depth":299,"text":98},3,{"id":230,"depth":202,"text":231},{"id":262,"depth":202,"text":263},{"id":278,"depth":202,"text":279},"NUXT0069","Finds VueUse project code that should use the supported useBreakpoints pattern instead.","md","Use VueUse useBreakpoints() for responsive state that stays reactive and testable.","nuxt",{},true,"\u002Fdiagnostics\u002Fnuxt0069",{"title":46,"description":304},"diagnostics\u002FNUXT0069","A one-time matchMedia() read does not stay reactive as the viewport changes; useBreakpoints() owns the media-query listeners and reactive state.","qZw8OB3R3Q9uVj26YOO6l9M6EKGy69IurbsEcSwCU1Q",1791309505092]