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