[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"module-hints":3,"versions":1350},{"name":4,"description":5,"repo":6,"npm":7,"icon":8,"github":9,"website":9,"learn_more":10,"category":11,"type":12,"maintainers":13,"compatibility":19,"generatedAt":22,"contributors":23,"stats":72,"readme":80},"hints","Nuxt module that shows hints for aspects of your application such as Performance, Security, and more!","nuxt\u002Fhints","@nuxt\u002Fhints","nuxt.svg","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fhints","","Devtools","official",[14],{"name":15,"github":16,"twitter":17,"bluesky":18},"Julien Huang","huang-julien","JulienHuang_dev","julienhuang-dev.bsky.social",{"nuxt":20,"requires":21},">=3.0.0",{},"2026-04-28T03:02:24.473Z",[24,27,31,35,38,42,45,48,51,54,57,60,63,66,69],{"id":25,"username":16,"contributions":26},63512348,123,{"id":28,"username":29,"contributions":30},4778485,"dargmuesli",6,{"id":32,"username":33,"contributions":34},28706372,"danielroe",2,{"id":36,"username":37,"contributions":34},37120330,"Baroshem",{"id":39,"username":40,"contributions":41},85992002,"KazariEX",1,{"id":43,"username":44,"contributions":41},904724,"atinux",{"id":46,"username":47,"contributions":41},18102267,"oritwoen",{"id":49,"username":50,"contributions":41},5106702,"Razzaghnoori",{"id":52,"username":53,"contributions":41},333856,"martijndewit",{"id":55,"username":56,"contributions":41},2497323,"aussieboi",{"id":58,"username":59,"contributions":41},96652894,"IO-Fire",{"id":61,"username":62,"contributions":41},1422374,"gmercey",{"id":64,"username":65,"contributions":41},73582807,"fabkho",{"id":67,"username":68,"contributions":41},640208,"TheAlexLichter",{"id":70,"username":71,"contributions":41},39984251,"Mini-ghost",{"version":73,"downloads":74,"stars":75,"watchers":75,"forks":76,"defaultBranch":77,"publishedAt":78,"createdAt":79},"1.0.3",112337,334,11,"main",1775159264552,1762896590519,{"data":81,"body":83,"toc":1327},{"title":82,"description":10},"Nuxt Hints",{"type":84,"children":85},"root",[86,94,139,148,153,167,174,179,222,235,241,337,343,348,355,360,368,374,379,387,393,398,406,412,417,425,431,436,444,450,456,468,474,479,485,490,496,509,538,544,569,577,583,588,598,607,613,632,822,828,847,965,970,1075,1081,1321],{"type":87,"tag":88,"props":89,"children":91},"element","h1",{"id":90},"nuxt-hints",[92],{"type":93,"value":82},"text",{"type":87,"tag":95,"props":96,"children":97},"p",{},[98,111,120,129],{"type":87,"tag":99,"props":100,"children":104},"a",{"href":101,"rel":102},"https:\u002F\u002Fnpmx.dev\u002Fpackage\u002F@nuxt\u002Fhints",[103],"nofollow",[105],{"type":87,"tag":106,"props":107,"children":110},"img",{"alt":108,"src":109},"npm version","https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@nuxt\u002Fhints\u002Flatest.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":87,"tag":99,"props":112,"children":114},{"href":101,"rel":113},[103],[115],{"type":87,"tag":106,"props":116,"children":119},{"alt":117,"src":118},"npm downloads","https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@nuxt\u002Fhints.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":87,"tag":99,"props":121,"children":123},{"href":101,"rel":122},[103],[124],{"type":87,"tag":106,"props":125,"children":128},{"alt":126,"src":127},"License","https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@nuxt\u002Fhints.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":87,"tag":99,"props":130,"children":133},{"href":131,"rel":132},"https:\u002F\u002Fnuxt.com",[103],[134],{"type":87,"tag":106,"props":135,"children":138},{"alt":136,"src":137},"Nuxt","https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNuxt-18181B?logo=nuxt",[],{"type":87,"tag":95,"props":140,"children":141},{},[142],{"type":87,"tag":143,"props":144,"children":145},"strong",{},[146],{"type":93,"value":147},"A Nuxt module that provides real-time feedback on your application's performance, accessibility, and security right in your browser.",{"type":87,"tag":95,"props":149,"children":150},{},[151],{"type":93,"value":152},"Nuxt Hints integrates directly into the Nuxt DevTools, giving you actionable insights to improve your web vitals, fix hydration mismatches, and audit third-party scripts without ever leaving your development environment.",{"type":87,"tag":154,"props":155,"children":156},"ul",{},[157],{"type":87,"tag":158,"props":159,"children":160},"li",{},[161],{"type":87,"tag":99,"props":162,"children":164},{"href":163},"\u002FCHANGELOG.md",[165],{"type":93,"value":166},"✨Release Notes",{"type":87,"tag":168,"props":169,"children":171},"h2",{"id":170},"getting-started",[172],{"type":93,"value":173},"Getting Started",{"type":87,"tag":95,"props":175,"children":176},{},[177],{"type":93,"value":178},"To install and add the module, you can run the following command:",{"type":87,"tag":180,"props":181,"children":185},"pre",{"className":182,"code":183,"language":184,"meta":10,"style":10},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","npx nuxt module add hints\n","bash",[186],{"type":87,"tag":187,"props":188,"children":189},"code",{"__ignoreMap":10},[190],{"type":87,"tag":191,"props":192,"children":194},"span",{"class":193,"line":41},"line",[195,201,207,212,217],{"type":87,"tag":191,"props":196,"children":198},{"style":197},"--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B",[199],{"type":93,"value":200},"npx",{"type":87,"tag":191,"props":202,"children":204},{"style":203},"--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D",[205],{"type":93,"value":206}," nuxt",{"type":87,"tag":191,"props":208,"children":209},{"style":203},[210],{"type":93,"value":211}," module",{"type":87,"tag":191,"props":213,"children":214},{"style":203},[215],{"type":93,"value":216}," add",{"type":87,"tag":191,"props":218,"children":219},{"style":203},[220],{"type":93,"value":221}," hints\n",{"type":87,"tag":95,"props":223,"children":224},{},[225,227,233],{"type":93,"value":226},"The module is now automatically installed and added to your ",{"type":87,"tag":187,"props":228,"children":230},{"className":229},[],[231],{"type":93,"value":232},"nuxt.config.ts",{"type":93,"value":234},".\nNow you can open your Nuxt app, go to the DevTools, and click the Nuxt Hints icon to get started.",{"type":87,"tag":168,"props":236,"children":238},{"id":237},"features",[239],{"type":93,"value":240},"Features",{"type":87,"tag":154,"props":242,"children":243},{},[244,254,264,274,284,294,327],{"type":87,"tag":158,"props":245,"children":246},{},[247,252],{"type":87,"tag":143,"props":248,"children":249},{},[250],{"type":93,"value":251},"🚀 Rich DevTools UI",{"type":93,"value":253},": A dedicated tab in Nuxt DevTools to visualize issues, inspect elements, and get recommendations.",{"type":87,"tag":158,"props":255,"children":256},{},[257,262],{"type":87,"tag":143,"props":258,"children":259},{},[260],{"type":93,"value":261},"💧 Hydration Mismatch Debugging",{"type":93,"value":263},": Side-by-side diffing of server-rendered and client-hydrated HTML to pinpoint the exact cause of mismatches.",{"type":87,"tag":158,"props":265,"children":266},{},[267,272],{"type":87,"tag":143,"props":268,"children":269},{},[270],{"type":93,"value":271},"⚡️ Web Vitals Analysis",{"type":93,"value":273},": Real-time metrics for LCP, INP, and CLS with detailed attribution and element-specific optimization tips.",{"type":87,"tag":158,"props":275,"children":276},{},[277,282],{"type":87,"tag":143,"props":278,"children":279},{},[280],{"type":93,"value":281},"📦 Third-Party Script Auditing",{"type":93,"value":283},": Dashboard to monitor performance, identify render-blocking scripts, and get security recommendations.",{"type":87,"tag":158,"props":285,"children":286},{},[287,292],{"type":87,"tag":143,"props":288,"children":289},{},[290],{"type":93,"value":291},"🧩 Unused Component Detection",{"type":93,"value":293},": Detects statically imported components that aren't rendered during SSR or hydration and suggests lazy-loading them to reduce bundle size.",{"type":87,"tag":158,"props":295,"children":296},{},[297,302,304],{"type":87,"tag":143,"props":298,"children":299},{},[300],{"type":93,"value":301},"🔍 Interactive Diagnostics",{"type":93,"value":303},":\n",{"type":87,"tag":154,"props":305,"children":306},{},[307,317],{"type":87,"tag":158,"props":308,"children":309},{},[310,315],{"type":87,"tag":143,"props":311,"children":312},{},[313],{"type":93,"value":314},"Hover to Highlight",{"type":93,"value":316},": Hover over an issue in the DevTools to highlight the corresponding element on your page.",{"type":87,"tag":158,"props":318,"children":319},{},[320,325],{"type":87,"tag":143,"props":321,"children":322},{},[323],{"type":93,"value":324},"Click to Inspect",{"type":93,"value":326},": Click to open the component source file directly in your code editor.",{"type":87,"tag":158,"props":328,"children":329},{},[330,335],{"type":87,"tag":143,"props":331,"children":332},{},[333],{"type":93,"value":334},"💡 Actionable Console Warnings",{"type":93,"value":336},": Clear, concise console messages that guide you to best practices and performance improvements.",{"type":87,"tag":168,"props":338,"children":340},{"id":339},"visual-interface-within-devtools",[341],{"type":93,"value":342},"Visual Interface within Devtools",{"type":87,"tag":95,"props":344,"children":345},{},[346],{"type":93,"value":347},"Nuxt Hints provides a rich, interactive UI inside the Nuxt DevTools panel.",{"type":87,"tag":349,"props":350,"children":352},"h3",{"id":351},"homepage",[353],{"type":93,"value":354},"Homepage",{"type":87,"tag":95,"props":356,"children":357},{},[358],{"type":93,"value":359},"A central hub to see a summary of all detected issues at a glance.",{"type":87,"tag":95,"props":361,"children":362},{},[363],{"type":87,"tag":106,"props":364,"children":367},{"alt":365,"src":366},"hints devtools homepage screenshot",".\u002F.github\u002Fassets\u002Fdevtools-homepage.png",[],{"type":87,"tag":349,"props":369,"children":371},{"id":370},"web-vitals",[372],{"type":93,"value":373},"Web Vitals",{"type":87,"tag":95,"props":375,"children":376},{},[377],{"type":93,"value":378},"Drill down into Core Web Vitals metrics. See detailed attribution for LCP, INP, and CLS, inspect the problematic elements, and get context-aware advice.",{"type":87,"tag":95,"props":380,"children":381},{},[382],{"type":87,"tag":106,"props":383,"children":386},{"alt":384,"src":385},"hints devtools web vitals screenshot",".\u002F.github\u002Fassets\u002Fdevtools-webvitals.png",[],{"type":87,"tag":349,"props":388,"children":390},{"id":389},"hydration-inspector",[391],{"type":93,"value":392},"Hydration Inspector",{"type":87,"tag":95,"props":394,"children":395},{},[396],{"type":93,"value":397},"Debug hydration mismatches with a powerful side-by-side diff viewer. See the exact differences between the server-rendered HTML and the client-side result.",{"type":87,"tag":95,"props":399,"children":400},{},[401],{"type":87,"tag":106,"props":402,"children":405},{"alt":403,"src":404},"hints devtools hydration screenshot",".\u002F.github\u002Fassets\u002Fdevtools-hydration.png",[],{"type":87,"tag":349,"props":407,"children":409},{"id":408},"third-party-scripts",[410],{"type":93,"value":411},"Third-Party Scripts",{"type":87,"tag":95,"props":413,"children":414},{},[415],{"type":93,"value":416},"Analyze all third-party scripts on your page. The dashboard shows loading times, render-blocking status, and security attributes, helping you identify and mitigate performance bottlenecks.",{"type":87,"tag":95,"props":418,"children":419},{},[420],{"type":87,"tag":106,"props":421,"children":424},{"alt":422,"src":423},"hints devtools third-party screenshot",".\u002F.github\u002Fassets\u002Fdevtools-thirdparties.png",[],{"type":87,"tag":349,"props":426,"children":428},{"id":427},"unused-imported-component-detection-lazy-load",[429],{"type":93,"value":430},"Unused Imported Component Detection (Lazy Load)",{"type":87,"tag":95,"props":432,"children":433},{},[434],{"type":93,"value":435},"Identify statically imported components that were never rendered during SSR or initial hydration. The module suggests converting them to lazy-loaded components to reduce end-users initial bundle size.",{"type":87,"tag":95,"props":437,"children":438},{},[439],{"type":87,"tag":106,"props":440,"children":443},{"alt":441,"src":442},"hints devtools lazy-load screenshot",".\u002F.github\u002Fassets\u002Fdevtools-lazy-load.png",[],{"type":87,"tag":168,"props":445,"children":447},{"id":446},"how-it-works",[448],{"type":93,"value":449},"How It Works",{"type":87,"tag":349,"props":451,"children":453},{"id":452},"performance-monitoring",[454],{"type":93,"value":455},"Performance Monitoring",{"type":87,"tag":95,"props":457,"children":458},{},[459,461,466],{"type":93,"value":460},"Nuxt Hints uses ",{"type":87,"tag":187,"props":462,"children":464},{"className":463},[],[465],{"type":93,"value":370},{"type":93,"value":467}," to gather Core Web Vitals metrics and automatically logs any msetrics that need improvement. It listens for INP, LCP, and CLS and provides detailed attribution for each.",{"type":87,"tag":349,"props":469,"children":471},{"id":470},"hydration-mismatch-detection",[472],{"type":93,"value":473},"Hydration Mismatch Detection",{"type":87,"tag":95,"props":475,"children":476},{},[477],{"type":93,"value":478},"The module hooks into Vue's hydration process to compare the server-rendered DOM with the client-side DOM. When a mismatch is detected, it captures the pre- and post-hydration HTML for inspection.",{"type":87,"tag":349,"props":480,"children":482},{"id":481},"third-party-script-analysis",[483],{"type":93,"value":484},"Third-Party Script Analysis",{"type":87,"tag":95,"props":486,"children":487},{},[488],{"type":93,"value":489},"Using a combination of a Nitro plugin and client-side observers, Nuxt Hints tracks every script loaded on the page, measuring its performance and analyzing its attributes.",{"type":87,"tag":349,"props":491,"children":493},{"id":492},"unused-component-detection-lazy-load",[494],{"type":93,"value":495},"Unused Component Detection (Lazy Load)",{"type":87,"tag":95,"props":497,"children":498},{},[499,501,507],{"type":93,"value":500},"At build time, a Vite plugin analyzes your component imports to identify statically imported ",{"type":87,"tag":187,"props":502,"children":504},{"className":503},[],[505],{"type":93,"value":506},".vue",{"type":93,"value":508}," components. At runtime, the module tracks which of those components actually render during SSR and initial hydration. After the page finishes loading, any imported component that was never rendered is flagged as a candidate for lazy loading.",{"type":87,"tag":95,"props":510,"children":511},{},[512,514,520,522,528,530,536],{"type":93,"value":513},"Suggestions are reported to the console and sent to the DevTools UI via Server-Sent Events, where you can review them per route and dismiss entries you've already addressed. The recommended fix is to either prefix the component with ",{"type":87,"tag":187,"props":515,"children":517},{"className":516},[],[518],{"type":93,"value":519},"Lazy",{"type":93,"value":521}," (e.g., ",{"type":87,"tag":187,"props":523,"children":525},{"className":524},[],[526],{"type":93,"value":527},"\u003CLazyHeavyComponent>",{"type":93,"value":529},") or use ",{"type":87,"tag":187,"props":531,"children":533},{"className":532},[],[534],{"type":93,"value":535},"defineAsyncComponent",{"type":93,"value":537}," so it is only downloaded when needed.",{"type":87,"tag":349,"props":539,"children":541},{"id":540},"html-validate-integration",[542],{"type":93,"value":543},"HTML Validate integration",{"type":87,"tag":95,"props":545,"children":546},{},[547,549,560,562,567],{"type":93,"value":548},"Nuxt Hints includes a built-in HTML validation feature powered by ",{"type":87,"tag":99,"props":550,"children":553},{"href":551,"rel":552},"https:\u002F\u002Fhtml-validate.org\u002F",[103],[554],{"type":87,"tag":187,"props":555,"children":557},{"className":556},[],[558],{"type":93,"value":559},"html-validate",{"type":93,"value":561},". On every server-rendered response, the module intercepts the HTML output and runs it through ",{"type":87,"tag":187,"props":563,"children":565},{"className":564},[],[566],{"type":93,"value":559},{"type":93,"value":568},".",{"type":87,"tag":95,"props":570,"children":571},{},[572],{"type":87,"tag":106,"props":573,"children":576},{"alt":574,"src":575},"hints html-validate screenshot",".\u002F.github\u002Fassets\u002Fdevtools-html-validate.png",[],{"type":87,"tag":349,"props":578,"children":580},{"id":579},"example-console-output",[581],{"type":93,"value":582},"Example Console Output",{"type":87,"tag":95,"props":584,"children":585},{},[586],{"type":93,"value":587},"When Nuxt Hints detects issues, you'll see clear warnings in your browser console:",{"type":87,"tag":180,"props":589,"children":593},{"className":590,"code":592,"language":93},[591],"language-text","[@nuxt\u002Fhints:performance] LCP Element should not have `loading=\"lazy\"`\nLearn more: https:\u002F\u002Fweb.dev\u002Foptimize-lcp\u002F#optimize-the-priority-the-resource-is-given\n",[594],{"type":87,"tag":187,"props":595,"children":596},{"__ignoreMap":10},[597],{"type":93,"value":592},{"type":87,"tag":180,"props":599,"children":602},{"className":600,"code":601,"language":93},[591],"[@nuxt\u002Fhints] Third-party script \"https:\u002F\u002Fcdn.example.com\u002Fscript.js\" is missing crossorigin attribute.\nConsider adding crossorigin=\"anonymous\" for better security and error reporting.\n",[603],{"type":87,"tag":187,"props":604,"children":605},{"__ignoreMap":10},[606],{"type":93,"value":601},{"type":87,"tag":168,"props":608,"children":610},{"id":609},"module-options",[611],{"type":93,"value":612},"Module Options",{"type":87,"tag":95,"props":614,"children":615},{},[616,618,623,625,630],{"type":93,"value":617},"Configure the module in your ",{"type":87,"tag":187,"props":619,"children":621},{"className":620},[],[622],{"type":93,"value":232},{"type":93,"value":624}," under the ",{"type":87,"tag":187,"props":626,"children":628},{"className":627},[],[629],{"type":93,"value":4},{"type":93,"value":631}," key:",{"type":87,"tag":180,"props":633,"children":637},{"className":634,"code":635,"language":636,"meta":10,"style":10},"language-typescript shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export default defineNuxtConfig({\n  hints: {\n    devtools: true,\n\n    \u002F\u002F Enable or configure individual features\n    \u002F\u002F if you feel overwhelmed by logs, you can disable some features and fix things step by step.\n    features: {\n      \u002F\u002F Defaults to true for each feature\n      hydration: true,\n    },\n  },\n})\n","typescript",[638],{"type":87,"tag":187,"props":639,"children":640},{"__ignoreMap":10},[641,673,692,716,726,736,744,761,770,791,800,808],{"type":87,"tag":191,"props":642,"children":643},{"class":193,"line":41},[644,650,655,661,667],{"type":87,"tag":191,"props":645,"children":647},{"style":646},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[648],{"type":93,"value":649},"export",{"type":87,"tag":191,"props":651,"children":652},{"style":646},[653],{"type":93,"value":654}," default",{"type":87,"tag":191,"props":656,"children":658},{"style":657},"--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF",[659],{"type":93,"value":660}," defineNuxtConfig",{"type":87,"tag":191,"props":662,"children":664},{"style":663},"--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8",[665],{"type":93,"value":666},"(",{"type":87,"tag":191,"props":668,"children":670},{"style":669},"--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF",[671],{"type":93,"value":672},"{\n",{"type":87,"tag":191,"props":674,"children":675},{"class":193,"line":34},[676,682,687],{"type":87,"tag":191,"props":677,"children":679},{"style":678},"--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178",[680],{"type":93,"value":681},"  hints",{"type":87,"tag":191,"props":683,"children":684},{"style":669},[685],{"type":93,"value":686},":",{"type":87,"tag":191,"props":688,"children":689},{"style":669},[690],{"type":93,"value":691}," {\n",{"type":87,"tag":191,"props":693,"children":695},{"class":193,"line":694},3,[696,701,705,711],{"type":87,"tag":191,"props":697,"children":698},{"style":678},[699],{"type":93,"value":700},"    devtools",{"type":87,"tag":191,"props":702,"children":703},{"style":669},[704],{"type":93,"value":686},{"type":87,"tag":191,"props":706,"children":708},{"style":707},"--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC",[709],{"type":93,"value":710}," true",{"type":87,"tag":191,"props":712,"children":713},{"style":669},[714],{"type":93,"value":715},",\n",{"type":87,"tag":191,"props":717,"children":719},{"class":193,"line":718},4,[720],{"type":87,"tag":191,"props":721,"children":723},{"emptyLinePlaceholder":722},true,[724],{"type":93,"value":725},"\n",{"type":87,"tag":191,"props":727,"children":729},{"class":193,"line":728},5,[730],{"type":87,"tag":191,"props":731,"children":733},{"style":732},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[734],{"type":93,"value":735},"    \u002F\u002F Enable or configure individual features\n",{"type":87,"tag":191,"props":737,"children":738},{"class":193,"line":30},[739],{"type":87,"tag":191,"props":740,"children":741},{"style":732},[742],{"type":93,"value":743},"    \u002F\u002F if you feel overwhelmed by logs, you can disable some features and fix things step by step.\n",{"type":87,"tag":191,"props":745,"children":747},{"class":193,"line":746},7,[748,753,757],{"type":87,"tag":191,"props":749,"children":750},{"style":678},[751],{"type":93,"value":752},"    features",{"type":87,"tag":191,"props":754,"children":755},{"style":669},[756],{"type":93,"value":686},{"type":87,"tag":191,"props":758,"children":759},{"style":669},[760],{"type":93,"value":691},{"type":87,"tag":191,"props":762,"children":764},{"class":193,"line":763},8,[765],{"type":87,"tag":191,"props":766,"children":767},{"style":732},[768],{"type":93,"value":769},"      \u002F\u002F Defaults to true for each feature\n",{"type":87,"tag":191,"props":771,"children":773},{"class":193,"line":772},9,[774,779,783,787],{"type":87,"tag":191,"props":775,"children":776},{"style":678},[777],{"type":93,"value":778},"      hydration",{"type":87,"tag":191,"props":780,"children":781},{"style":669},[782],{"type":93,"value":686},{"type":87,"tag":191,"props":784,"children":785},{"style":707},[786],{"type":93,"value":710},{"type":87,"tag":191,"props":788,"children":789},{"style":669},[790],{"type":93,"value":715},{"type":87,"tag":191,"props":792,"children":794},{"class":193,"line":793},10,[795],{"type":87,"tag":191,"props":796,"children":797},{"style":669},[798],{"type":93,"value":799},"    },\n",{"type":87,"tag":191,"props":801,"children":802},{"class":193,"line":76},[803],{"type":87,"tag":191,"props":804,"children":805},{"style":669},[806],{"type":93,"value":807},"  },\n",{"type":87,"tag":191,"props":809,"children":811},{"class":193,"line":810},12,[812,817],{"type":87,"tag":191,"props":813,"children":814},{"style":669},[815],{"type":93,"value":816},"}",{"type":87,"tag":191,"props":818,"children":819},{"style":663},[820],{"type":93,"value":821},")\n",{"type":87,"tag":349,"props":823,"children":825},{"id":824},"feature-toggles",[826],{"type":93,"value":827},"Feature toggles",{"type":87,"tag":95,"props":829,"children":830},{},[831,833,838,840,845],{"type":93,"value":832},"Each feature accepts either a ",{"type":87,"tag":143,"props":834,"children":835},{},[836],{"type":93,"value":837},"boolean",{"type":93,"value":839}," or an ",{"type":87,"tag":143,"props":841,"children":842},{},[843],{"type":93,"value":844},"object",{"type":93,"value":846}," for finer control:",{"type":87,"tag":848,"props":849,"children":850},"table",{},[851,870],{"type":87,"tag":852,"props":853,"children":854},"thead",{},[855],{"type":87,"tag":856,"props":857,"children":858},"tr",{},[859,865],{"type":87,"tag":860,"props":861,"children":862},"th",{},[863],{"type":93,"value":864},"Key",{"type":87,"tag":860,"props":866,"children":867},{},[868],{"type":93,"value":869},"Description",{"type":87,"tag":871,"props":872,"children":873},"tbody",{},[874,892,909,926,943],{"type":87,"tag":856,"props":875,"children":876},{},[877,887],{"type":87,"tag":878,"props":879,"children":880},"td",{},[881],{"type":87,"tag":187,"props":882,"children":884},{"className":883},[],[885],{"type":93,"value":886},"hydration",{"type":87,"tag":878,"props":888,"children":889},{},[890],{"type":93,"value":891},"Detect and inspect hydration mismatches",{"type":87,"tag":856,"props":893,"children":894},{},[895,904],{"type":87,"tag":878,"props":896,"children":897},{},[898],{"type":87,"tag":187,"props":899,"children":901},{"className":900},[],[902],{"type":93,"value":903},"lazyLoad",{"type":87,"tag":878,"props":905,"children":906},{},[907],{"type":93,"value":908},"Flag unused imported components that could be lazy-loaded",{"type":87,"tag":856,"props":910,"children":911},{},[912,921],{"type":87,"tag":878,"props":913,"children":914},{},[915],{"type":87,"tag":187,"props":916,"children":918},{"className":917},[],[919],{"type":93,"value":920},"webVitals",{"type":87,"tag":878,"props":922,"children":923},{},[924],{"type":93,"value":925},"Track LCP, INP, and CLS metrics",{"type":87,"tag":856,"props":927,"children":928},{},[929,938],{"type":87,"tag":878,"props":930,"children":931},{},[932],{"type":87,"tag":187,"props":933,"children":935},{"className":934},[],[936],{"type":93,"value":937},"thirdPartyScripts",{"type":87,"tag":878,"props":939,"children":940},{},[941],{"type":93,"value":942},"Audit third-party scripts for performance and security",{"type":87,"tag":856,"props":944,"children":945},{},[946,955],{"type":87,"tag":878,"props":947,"children":948},{},[949],{"type":87,"tag":187,"props":950,"children":952},{"className":951},[],[953],{"type":93,"value":954},"htmlValidate",{"type":87,"tag":878,"props":956,"children":957},{},[958,960],{"type":93,"value":959},"Validate server-rendered HTML with ",{"type":87,"tag":99,"props":961,"children":963},{"href":551,"rel":962},[103],[964],{"type":93,"value":559},{"type":87,"tag":95,"props":966,"children":967},{},[968],{"type":93,"value":969},"When using the object syntax, the following flags are available:",{"type":87,"tag":180,"props":971,"children":973},{"className":634,"code":972,"language":636,"meta":10,"style":10},"{\n  logs: true,       \u002F\u002F Print warnings to the browser console\n  devtools: true,   \u002F\u002F Show this feature in the DevTools panel\n  options: { ... }, \u002F\u002F Feature-specific options\n}\n",[974],{"type":87,"tag":187,"props":975,"children":976},{"__ignoreMap":10},[977,984,1010,1035,1067],{"type":87,"tag":191,"props":978,"children":979},{"class":193,"line":41},[980],{"type":87,"tag":191,"props":981,"children":982},{"style":669},[983],{"type":93,"value":672},{"type":87,"tag":191,"props":985,"children":986},{"class":193,"line":34},[987,992,996,1000,1005],{"type":87,"tag":191,"props":988,"children":989},{"style":197},[990],{"type":93,"value":991},"  logs",{"type":87,"tag":191,"props":993,"children":994},{"style":669},[995],{"type":93,"value":686},{"type":87,"tag":191,"props":997,"children":998},{"style":707},[999],{"type":93,"value":710},{"type":87,"tag":191,"props":1001,"children":1002},{"style":669},[1003],{"type":93,"value":1004},",",{"type":87,"tag":191,"props":1006,"children":1007},{"style":732},[1008],{"type":93,"value":1009},"       \u002F\u002F Print warnings to the browser console\n",{"type":87,"tag":191,"props":1011,"children":1012},{"class":193,"line":694},[1013,1018,1022,1026,1030],{"type":87,"tag":191,"props":1014,"children":1015},{"style":197},[1016],{"type":93,"value":1017},"  devtools",{"type":87,"tag":191,"props":1019,"children":1020},{"style":669},[1021],{"type":93,"value":686},{"type":87,"tag":191,"props":1023,"children":1024},{"style":707},[1025],{"type":93,"value":710},{"type":87,"tag":191,"props":1027,"children":1028},{"style":669},[1029],{"type":93,"value":1004},{"type":87,"tag":191,"props":1031,"children":1032},{"style":732},[1033],{"type":93,"value":1034},"   \u002F\u002F Show this feature in the DevTools panel\n",{"type":87,"tag":191,"props":1036,"children":1037},{"class":193,"line":718},[1038,1043,1047,1052,1057,1062],{"type":87,"tag":191,"props":1039,"children":1040},{"style":197},[1041],{"type":93,"value":1042},"  options",{"type":87,"tag":191,"props":1044,"children":1045},{"style":669},[1046],{"type":93,"value":686},{"type":87,"tag":191,"props":1048,"children":1049},{"style":669},[1050],{"type":93,"value":1051}," {",{"type":87,"tag":191,"props":1053,"children":1054},{"style":669},[1055],{"type":93,"value":1056}," ...",{"type":87,"tag":191,"props":1058,"children":1059},{"style":669},[1060],{"type":93,"value":1061}," },",{"type":87,"tag":191,"props":1063,"children":1064},{"style":732},[1065],{"type":93,"value":1066}," \u002F\u002F Feature-specific options\n",{"type":87,"tag":191,"props":1068,"children":1069},{"class":193,"line":728},[1070],{"type":87,"tag":191,"props":1071,"children":1072},{"style":669},[1073],{"type":93,"value":1074},"}\n",{"type":87,"tag":168,"props":1076,"children":1078},{"id":1077},"development",[1079],{"type":93,"value":1080},"Development",{"type":87,"tag":180,"props":1082,"children":1084},{"className":182,"code":1083,"language":184,"meta":10,"style":10},"# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm run dev:prepare\n\n# Develop with the playground\npnpm run dev\n\n# Build the playground\npnpm run dev:build\n\n# Run ESLint\npnpm run lint\n\n# Run Vitest\npnpm run test\npnpm run test:watch\n\n# Release new version\npnpm run release\n",[1085],{"type":87,"tag":187,"props":1086,"children":1087},{"__ignoreMap":10},[1088,1096,1109,1116,1124,1141,1148,1156,1172,1179,1187,1203,1210,1219,1236,1244,1253,1270,1287,1295,1304],{"type":87,"tag":191,"props":1089,"children":1090},{"class":193,"line":41},[1091],{"type":87,"tag":191,"props":1092,"children":1093},{"style":732},[1094],{"type":93,"value":1095},"# Install dependencies\n",{"type":87,"tag":191,"props":1097,"children":1098},{"class":193,"line":34},[1099,1104],{"type":87,"tag":191,"props":1100,"children":1101},{"style":197},[1102],{"type":93,"value":1103},"pnpm",{"type":87,"tag":191,"props":1105,"children":1106},{"style":203},[1107],{"type":93,"value":1108}," install\n",{"type":87,"tag":191,"props":1110,"children":1111},{"class":193,"line":694},[1112],{"type":87,"tag":191,"props":1113,"children":1114},{"emptyLinePlaceholder":722},[1115],{"type":93,"value":725},{"type":87,"tag":191,"props":1117,"children":1118},{"class":193,"line":718},[1119],{"type":87,"tag":191,"props":1120,"children":1121},{"style":732},[1122],{"type":93,"value":1123},"# Generate type stubs\n",{"type":87,"tag":191,"props":1125,"children":1126},{"class":193,"line":728},[1127,1131,1136],{"type":87,"tag":191,"props":1128,"children":1129},{"style":197},[1130],{"type":93,"value":1103},{"type":87,"tag":191,"props":1132,"children":1133},{"style":203},[1134],{"type":93,"value":1135}," run",{"type":87,"tag":191,"props":1137,"children":1138},{"style":203},[1139],{"type":93,"value":1140}," dev:prepare\n",{"type":87,"tag":191,"props":1142,"children":1143},{"class":193,"line":30},[1144],{"type":87,"tag":191,"props":1145,"children":1146},{"emptyLinePlaceholder":722},[1147],{"type":93,"value":725},{"type":87,"tag":191,"props":1149,"children":1150},{"class":193,"line":746},[1151],{"type":87,"tag":191,"props":1152,"children":1153},{"style":732},[1154],{"type":93,"value":1155},"# Develop with the playground\n",{"type":87,"tag":191,"props":1157,"children":1158},{"class":193,"line":763},[1159,1163,1167],{"type":87,"tag":191,"props":1160,"children":1161},{"style":197},[1162],{"type":93,"value":1103},{"type":87,"tag":191,"props":1164,"children":1165},{"style":203},[1166],{"type":93,"value":1135},{"type":87,"tag":191,"props":1168,"children":1169},{"style":203},[1170],{"type":93,"value":1171}," dev\n",{"type":87,"tag":191,"props":1173,"children":1174},{"class":193,"line":772},[1175],{"type":87,"tag":191,"props":1176,"children":1177},{"emptyLinePlaceholder":722},[1178],{"type":93,"value":725},{"type":87,"tag":191,"props":1180,"children":1181},{"class":193,"line":793},[1182],{"type":87,"tag":191,"props":1183,"children":1184},{"style":732},[1185],{"type":93,"value":1186},"# Build the playground\n",{"type":87,"tag":191,"props":1188,"children":1189},{"class":193,"line":76},[1190,1194,1198],{"type":87,"tag":191,"props":1191,"children":1192},{"style":197},[1193],{"type":93,"value":1103},{"type":87,"tag":191,"props":1195,"children":1196},{"style":203},[1197],{"type":93,"value":1135},{"type":87,"tag":191,"props":1199,"children":1200},{"style":203},[1201],{"type":93,"value":1202}," dev:build\n",{"type":87,"tag":191,"props":1204,"children":1205},{"class":193,"line":810},[1206],{"type":87,"tag":191,"props":1207,"children":1208},{"emptyLinePlaceholder":722},[1209],{"type":93,"value":725},{"type":87,"tag":191,"props":1211,"children":1213},{"class":193,"line":1212},13,[1214],{"type":87,"tag":191,"props":1215,"children":1216},{"style":732},[1217],{"type":93,"value":1218},"# Run ESLint\n",{"type":87,"tag":191,"props":1220,"children":1222},{"class":193,"line":1221},14,[1223,1227,1231],{"type":87,"tag":191,"props":1224,"children":1225},{"style":197},[1226],{"type":93,"value":1103},{"type":87,"tag":191,"props":1228,"children":1229},{"style":203},[1230],{"type":93,"value":1135},{"type":87,"tag":191,"props":1232,"children":1233},{"style":203},[1234],{"type":93,"value":1235}," lint\n",{"type":87,"tag":191,"props":1237,"children":1239},{"class":193,"line":1238},15,[1240],{"type":87,"tag":191,"props":1241,"children":1242},{"emptyLinePlaceholder":722},[1243],{"type":93,"value":725},{"type":87,"tag":191,"props":1245,"children":1247},{"class":193,"line":1246},16,[1248],{"type":87,"tag":191,"props":1249,"children":1250},{"style":732},[1251],{"type":93,"value":1252},"# Run Vitest\n",{"type":87,"tag":191,"props":1254,"children":1256},{"class":193,"line":1255},17,[1257,1261,1265],{"type":87,"tag":191,"props":1258,"children":1259},{"style":197},[1260],{"type":93,"value":1103},{"type":87,"tag":191,"props":1262,"children":1263},{"style":203},[1264],{"type":93,"value":1135},{"type":87,"tag":191,"props":1266,"children":1267},{"style":203},[1268],{"type":93,"value":1269}," test\n",{"type":87,"tag":191,"props":1271,"children":1273},{"class":193,"line":1272},18,[1274,1278,1282],{"type":87,"tag":191,"props":1275,"children":1276},{"style":197},[1277],{"type":93,"value":1103},{"type":87,"tag":191,"props":1279,"children":1280},{"style":203},[1281],{"type":93,"value":1135},{"type":87,"tag":191,"props":1283,"children":1284},{"style":203},[1285],{"type":93,"value":1286}," test:watch\n",{"type":87,"tag":191,"props":1288,"children":1290},{"class":193,"line":1289},19,[1291],{"type":87,"tag":191,"props":1292,"children":1293},{"emptyLinePlaceholder":722},[1294],{"type":93,"value":725},{"type":87,"tag":191,"props":1296,"children":1298},{"class":193,"line":1297},20,[1299],{"type":87,"tag":191,"props":1300,"children":1301},{"style":732},[1302],{"type":93,"value":1303},"# Release new version\n",{"type":87,"tag":191,"props":1305,"children":1307},{"class":193,"line":1306},21,[1308,1312,1316],{"type":87,"tag":191,"props":1309,"children":1310},{"style":197},[1311],{"type":93,"value":1103},{"type":87,"tag":191,"props":1313,"children":1314},{"style":203},[1315],{"type":93,"value":1135},{"type":87,"tag":191,"props":1317,"children":1318},{"style":203},[1319],{"type":93,"value":1320}," release\n",{"type":87,"tag":1322,"props":1323,"children":1324},"style",{},[1325],{"type":93,"value":1326},"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":10,"searchDepth":34,"depth":34,"links":1328},[1329,1330,1331,1338,1346,1349],{"id":170,"depth":34,"text":173},{"id":237,"depth":34,"text":240},{"id":339,"depth":34,"text":342,"children":1332},[1333,1334,1335,1336,1337],{"id":351,"depth":694,"text":354},{"id":370,"depth":694,"text":373},{"id":389,"depth":694,"text":392},{"id":408,"depth":694,"text":411},{"id":427,"depth":694,"text":430},{"id":446,"depth":34,"text":449,"children":1339},[1340,1341,1342,1343,1344,1345],{"id":452,"depth":694,"text":455},{"id":470,"depth":694,"text":473},{"id":481,"depth":694,"text":484},{"id":492,"depth":694,"text":495},{"id":540,"depth":694,"text":543},{"id":579,"depth":694,"text":582},{"id":609,"depth":34,"text":612,"children":1347},[1348],{"id":824,"depth":694,"text":827},{"id":1077,"depth":34,"text":1080},{"v5":1351,"v4":1352,"v3":1353,"v2":1354},"5 (nightly)","4.4.2","3.21.2","2.18.1"]