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