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