[{"data":1,"prerenderedAt":388},["ShallowReactive",2],{"navigation_docs":3,"diagnostic-content-VUE0020":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":378,"description":379,"docsUrl":54,"extension":380,"fix":381,"framework":104,"meta":382,"navigation":383,"pack":56,"path":384,"ruleId":57,"rulePath":58,"seo":385,"severity":59,"source":60,"sourceUrl":61,"stem":386,"why":70,"__hash__":387},"diagnostics\u002Fdiagnostics\u002FVUE0020.md","VUE0020: Use post-flush watchers for DOM reads",{"type":48,"value":49,"toc":368},"minimark",[50,62,67,71,75,87,91,96,99,206,209,298,302,305,336,340,352,356,364],[51,52],"rule-metadata",{"category":53,"docsUrl":54,"fix":55,"pack":56,"ruleId":57,"rulePath":58,"severity":59,"source":60,"sourceUrl":61},"watchers","https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Fwatchers.html#post-watchers","suggestion","vite-doctor\u002Fvue","vue\u002Fwatch\u002Frequire-post-flush-for-dom-read","\u002Fvue\u002Frules\u002Fwatch\u002Frequire-post-flush-for-dom-read","warn","src\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Frequire-post-flush-for-dom-watch.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Frequire-post-flush-for-dom-watch.ts",[63,64,66],"h2",{"id":65},"why-it-happens","Why it happens",[68,69,70],"p",{},"Default watchers run before their owner's DOM update. Layout measurements can therefore reflect the previous render.",[63,72,74],{"id":73},"fix","Fix",[68,76,77,78,82,83,86],{},"Use { flush: 'post' }, ",[79,80,81],"code",{},"watchPostEffect()",", or await ",[79,84,85],{},"nextTick()"," before reading DOM state.",[63,88,90],{"id":89},"example","Example",[92,93,95],"h3",{"id":94},"use-post-flush-dom-reads","Use post-flush DOM reads",[68,97,98],{},"Before",[100,101,106],"pre",{"className":102,"code":103,"language":104,"meta":105,"style":105},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nwatch(open, () => {\n  panel.value?.getBoundingClientRect()\n})\n\u003C\u002Fscript>\n","vue","",[79,107,108,143,166,187,196],{"__ignoreMap":105},[109,110,113,117,121,125,128,131,134,138,140],"span",{"class":111,"line":112},"line",1,[109,114,116],{"class":115},"sMK4o","\u003C",[109,118,120],{"class":119},"swJcz","script",[109,122,124],{"class":123},"spNyl"," setup",[109,126,127],{"class":123}," lang",[109,129,130],{"class":115},"=",[109,132,133],{"class":115},"\"",[109,135,137],{"class":136},"sfazB","ts",[109,139,133],{"class":115},[109,141,142],{"class":115},">\n",[109,144,146,150,154,157,160,163],{"class":111,"line":145},2,[109,147,149],{"class":148},"s2Zo4","watch",[109,151,153],{"class":152},"sTEyZ","(open",[109,155,156],{"class":115},",",[109,158,159],{"class":115}," ()",[109,161,162],{"class":123}," =>",[109,164,165],{"class":115}," {\n",[109,167,169,172,175,178,181,184],{"class":111,"line":168},3,[109,170,171],{"class":152},"  panel",[109,173,174],{"class":115},".",[109,176,177],{"class":152},"value",[109,179,180],{"class":115},"?.",[109,182,183],{"class":148},"getBoundingClientRect",[109,185,186],{"class":119},"()\n",[109,188,190,193],{"class":111,"line":189},4,[109,191,192],{"class":115},"}",[109,194,195],{"class":152},")\n",[109,197,199,202,204],{"class":111,"line":198},5,[109,200,201],{"class":115},"\u003C\u002F",[109,203,120],{"class":119},[109,205,142],{"class":115},[68,207,208],{},"After",[100,210,212],{"className":102,"code":211,"language":104,"meta":105,"style":105},"\u003Cscript setup lang=\"ts\">\nwatch(open, () => {\n  panel.value?.getBoundingClientRect()\n}, { flush: 'post' })\n\u003C\u002Fscript>\n",[79,213,214,234,248,262,290],{"__ignoreMap":105},[109,215,216,218,220,222,224,226,228,230,232],{"class":111,"line":112},[109,217,116],{"class":115},[109,219,120],{"class":119},[109,221,124],{"class":123},[109,223,127],{"class":123},[109,225,130],{"class":115},[109,227,133],{"class":115},[109,229,137],{"class":136},[109,231,133],{"class":115},[109,233,142],{"class":115},[109,235,236,238,240,242,244,246],{"class":111,"line":145},[109,237,149],{"class":148},[109,239,153],{"class":152},[109,241,156],{"class":115},[109,243,159],{"class":115},[109,245,162],{"class":123},[109,247,165],{"class":115},[109,249,250,252,254,256,258,260],{"class":111,"line":168},[109,251,171],{"class":152},[109,253,174],{"class":115},[109,255,177],{"class":152},[109,257,180],{"class":115},[109,259,183],{"class":148},[109,261,186],{"class":119},[109,263,264,267,270,273,276,279,282,285,288],{"class":111,"line":189},[109,265,266],{"class":115},"},",[109,268,269],{"class":115}," {",[109,271,272],{"class":119}," flush",[109,274,275],{"class":115},":",[109,277,278],{"class":115}," '",[109,280,281],{"class":136},"post",[109,283,284],{"class":115},"'",[109,286,287],{"class":115}," }",[109,289,195],{"class":152},[109,291,292,294,296],{"class":111,"line":198},[109,293,201],{"class":115},[109,295,120],{"class":119},[109,297,142],{"class":115},[63,299,301],{"id":300},"verify-the-fix","Verify the fix",[68,303,304],{},"Run only this rule after editing so the report stays focused on the diagnostic you are closing:",[100,306,310],{"className":307,"code":308,"language":309,"meta":105,"style":105},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vite-doctor . --framework vue --rules vue\u002Fwatch\u002Frequire-post-flush-for-dom-read\n","bash",[79,311,312],{"__ignoreMap":105},[109,313,314,318,321,324,327,330,333],{"class":111,"line":112},[109,315,317],{"class":316},"sBMFI","pnpm",[109,319,320],{"class":136}," vite-doctor",[109,322,323],{"class":136}," .",[109,325,326],{"class":136}," --framework",[109,328,329],{"class":136}," vue",[109,331,332],{"class":136}," --rules",[109,334,335],{"class":136}," vue\u002Fwatch\u002Frequire-post-flush-for-dom-read\n",[63,337,339],{"id":338},"useful-links","Useful links",[341,342,343],"ul",{},[344,345,346],"li",{},[347,348,351],"a",{"href":54,"rel":349},[350],"nofollow","Upstream docs",[63,353,355],{"id":354},"related-rule","Related rule",[341,357,358],{},[344,359,360],{},[347,361,362],{"href":58},[79,363,57],{},[365,366,367],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":105,"searchDepth":145,"depth":145,"links":369},[370,371,372,375,376,377],{"id":65,"depth":145,"text":66},{"id":73,"depth":145,"text":74},{"id":89,"depth":145,"text":90,"children":373},[374],{"id":94,"depth":168,"text":95},{"id":300,"depth":145,"text":301},{"id":338,"depth":145,"text":339},{"id":354,"depth":145,"text":355},"VUE0020","Report watcher callbacks that read DOM state before Vue has flushed the component update.","md","Use { flush: 'post' }, watchPostEffect(), or await nextTick() before reading DOM state.",{},true,"\u002Fdiagnostics\u002Fvue0020",{"title":46,"description":379},"diagnostics\u002FVUE0020","-f13eDr3UPMJUXXj1-bIMh8g3uy2jIPh0yJGcXGrq58",1791309481918]