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