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