[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"versions":3,"module-hints":7},{"v3":4,"v4":5,"v2":6},"3.21.8","4.4.8","2.18.1",{"name":8,"description":9,"repo":10,"npm":11,"icon":12,"github":13,"website":13,"learn_more":14,"category":15,"type":16,"maintainers":17,"compatibility":23,"generatedAt":26,"contributors":27,"stats":82,"readme":90},"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",[18],{"name":19,"github":20,"twitter":21,"bluesky":22},"Julien Huang","huang-julien","JulienHuang_dev","julienhuang-dev.bsky.social",{"nuxt":24,"requires":25},">=3.0.0",{},"2026-06-10T00:12:41.331Z",[28,31,35,39,42,46,49,52,55,58,61,64,67,70,73,76,79],{"id":29,"username":20,"contributions":30},63512348,127,{"id":32,"username":33,"contributions":34},4778485,"dargmuesli",6,{"id":36,"username":37,"contributions":38},28706372,"danielroe",2,{"id":40,"username":41,"contributions":38},37120330,"Baroshem",{"id":43,"username":44,"contributions":45},85992002,"KazariEX",1,{"id":47,"username":48,"contributions":45},904724,"atinux",{"id":50,"username":51,"contributions":45},18102267,"oritwoen",{"id":53,"username":54,"contributions":45},5106702,"Razzaghnoori",{"id":56,"username":57,"contributions":45},79974907,"Mat4m0",{"id":59,"username":60,"contributions":45},333856,"martijndewit",{"id":62,"username":63,"contributions":45},2497323,"aussieboi",{"id":65,"username":66,"contributions":45},96652894,"IO-Fire",{"id":68,"username":69,"contributions":45},1422374,"gmercey",{"id":71,"username":72,"contributions":45},73582807,"fabkho",{"id":74,"username":75,"contributions":45},739984,"benjamincanac",{"id":77,"username":78,"contributions":45},640208,"TheAlexLichter",{"id":80,"username":81,"contributions":45},39984251,"Mini-ghost",{"version":83,"downloads":84,"stars":85,"watchers":85,"forks":86,"defaultBranch":87,"publishedAt":88,"createdAt":89},"1.1.2",138019,338,12,"main",1779127920342,1762896590519,{"data":91,"body":93,"toc":797},{"title":92,"description":14},"Nuxt Hints",{"type":94,"children":95},"root",[96,104,149,158,163,177,184,189,202,215,221,317,323,328,335,340,348,354,359,367,373,378,386,392,397,405,411,416,424,430,436,448,454,459,465,470,476,489,518,524,549,557,563,568,578,587,593,612,622,628,647,765,770,778,784,792],{"type":97,"tag":98,"props":99,"children":101},"element","h1",{"id":100},"nuxt-hints",[102],{"type":103,"value":92},"text",{"type":97,"tag":105,"props":106,"children":107},"p",{},[108,121,130,139],{"type":97,"tag":109,"props":110,"children":114},"a",{"href":111,"rel":112},"https://npmx.dev/package/@nuxt/hints",[113],"nofollow",[115],{"type":97,"tag":116,"props":117,"children":120},"img",{"alt":118,"src":119},"npm version","https://img.shields.io/npm/v/@nuxt/hints/latest.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":97,"tag":109,"props":122,"children":124},{"href":111,"rel":123},[113],[125],{"type":97,"tag":116,"props":126,"children":129},{"alt":127,"src":128},"npm downloads","https://img.shields.io/npm/dm/@nuxt/hints.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":97,"tag":109,"props":131,"children":133},{"href":111,"rel":132},[113],[134],{"type":97,"tag":116,"props":135,"children":138},{"alt":136,"src":137},"License","https://img.shields.io/npm/l/@nuxt/hints.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":97,"tag":109,"props":140,"children":143},{"href":141,"rel":142},"https://nuxt.com",[113],[144],{"type":97,"tag":116,"props":145,"children":148},{"alt":146,"src":147},"Nuxt","https://img.shields.io/badge/Nuxt-18181B?logo=nuxt",[],{"type":97,"tag":105,"props":150,"children":151},{},[152],{"type":97,"tag":153,"props":154,"children":155},"strong",{},[156],{"type":103,"value":157},"A Nuxt module that provides real-time feedback on your application's performance, accessibility, and security right in your browser.",{"type":97,"tag":105,"props":159,"children":160},{},[161],{"type":103,"value":162},"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":97,"tag":164,"props":165,"children":166},"ul",{},[167],{"type":97,"tag":168,"props":169,"children":170},"li",{},[171],{"type":97,"tag":109,"props":172,"children":174},{"href":173},"/CHANGELOG.md",[175],{"type":103,"value":176},"✨Release Notes",{"type":97,"tag":178,"props":179,"children":181},"h2",{"id":180},"getting-started",[182],{"type":103,"value":183},"Getting Started",{"type":97,"tag":105,"props":185,"children":186},{},[187],{"type":103,"value":188},"To install and add the module, you can run the following command:",{"type":97,"tag":190,"props":191,"children":196},"pre",{"className":192,"code":193,"language":194,"meta":14,"style":195},"language-bash","npx nuxt module add hints\n","bash","undefined",[197],{"type":97,"tag":198,"props":199,"children":200},"code",{"__ignoreMap":14},[201],{"type":103,"value":193},{"type":97,"tag":105,"props":203,"children":204},{},[205,207,213],{"type":103,"value":206},"The module is now automatically installed and added to your ",{"type":97,"tag":198,"props":208,"children":210},{"className":209},[],[211],{"type":103,"value":212},"nuxt.config.ts",{"type":103,"value":214},".\nNow you can open your Nuxt app, go to the DevTools, and click the Nuxt Hints icon to get started.",{"type":97,"tag":178,"props":216,"children":218},{"id":217},"features",[219],{"type":103,"value":220},"Features",{"type":97,"tag":164,"props":222,"children":223},{},[224,234,244,254,264,274,307],{"type":97,"tag":168,"props":225,"children":226},{},[227,232],{"type":97,"tag":153,"props":228,"children":229},{},[230],{"type":103,"value":231},"🚀 Rich DevTools UI",{"type":103,"value":233},": A dedicated tab in Nuxt DevTools to visualize issues, inspect elements, and get recommendations.",{"type":97,"tag":168,"props":235,"children":236},{},[237,242],{"type":97,"tag":153,"props":238,"children":239},{},[240],{"type":103,"value":241},"💧 Hydration Mismatch Debugging",{"type":103,"value":243},": Side-by-side diffing of server-rendered and client-hydrated HTML to pinpoint the exact cause of mismatches.",{"type":97,"tag":168,"props":245,"children":246},{},[247,252],{"type":97,"tag":153,"props":248,"children":249},{},[250],{"type":103,"value":251},"⚡️ Web Vitals Analysis",{"type":103,"value":253},": Real-time metrics for LCP, INP, and CLS with detailed attribution and element-specific optimization tips.",{"type":97,"tag":168,"props":255,"children":256},{},[257,262],{"type":97,"tag":153,"props":258,"children":259},{},[260],{"type":103,"value":261},"📦 Third-Party Script Auditing",{"type":103,"value":263},": Dashboard to monitor performance, identify render-blocking scripts, and get security recommendations.",{"type":97,"tag":168,"props":265,"children":266},{},[267,272],{"type":97,"tag":153,"props":268,"children":269},{},[270],{"type":103,"value":271},"🧩 Unused Component Detection",{"type":103,"value":273},": Detects statically imported components that aren't rendered during SSR or hydration and suggests lazy-loading them to reduce bundle size.",{"type":97,"tag":168,"props":275,"children":276},{},[277,282,284],{"type":97,"tag":153,"props":278,"children":279},{},[280],{"type":103,"value":281},"🔍 Interactive Diagnostics",{"type":103,"value":283},":\n",{"type":97,"tag":164,"props":285,"children":286},{},[287,297],{"type":97,"tag":168,"props":288,"children":289},{},[290,295],{"type":97,"tag":153,"props":291,"children":292},{},[293],{"type":103,"value":294},"Hover to Highlight",{"type":103,"value":296},": Hover over an issue in the DevTools to highlight the corresponding element on your page.",{"type":97,"tag":168,"props":298,"children":299},{},[300,305],{"type":97,"tag":153,"props":301,"children":302},{},[303],{"type":103,"value":304},"Click to Inspect",{"type":103,"value":306},": Click to open the component source file directly in your code editor.",{"type":97,"tag":168,"props":308,"children":309},{},[310,315],{"type":97,"tag":153,"props":311,"children":312},{},[313],{"type":103,"value":314},"💡 Actionable Console Warnings",{"type":103,"value":316},": Clear, concise console messages that guide you to best practices and performance improvements.",{"type":97,"tag":178,"props":318,"children":320},{"id":319},"visual-interface-within-devtools",[321],{"type":103,"value":322},"Visual Interface within Devtools",{"type":97,"tag":105,"props":324,"children":325},{},[326],{"type":103,"value":327},"Nuxt Hints provides a rich, interactive UI inside the Nuxt DevTools panel.",{"type":97,"tag":329,"props":330,"children":332},"h3",{"id":331},"homepage",[333],{"type":103,"value":334},"Homepage",{"type":97,"tag":105,"props":336,"children":337},{},[338],{"type":103,"value":339},"A central hub to see a summary of all detected issues at a glance.",{"type":97,"tag":105,"props":341,"children":342},{},[343],{"type":97,"tag":116,"props":344,"children":347},{"alt":345,"src":346},"hints devtools homepage screenshot","./.github/assets/devtools-homepage.png",[],{"type":97,"tag":329,"props":349,"children":351},{"id":350},"web-vitals",[352],{"type":103,"value":353},"Web Vitals",{"type":97,"tag":105,"props":355,"children":356},{},[357],{"type":103,"value":358},"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":97,"tag":105,"props":360,"children":361},{},[362],{"type":97,"tag":116,"props":363,"children":366},{"alt":364,"src":365},"hints devtools web vitals screenshot","./.github/assets/devtools-webvitals.png",[],{"type":97,"tag":329,"props":368,"children":370},{"id":369},"hydration-inspector",[371],{"type":103,"value":372},"Hydration Inspector",{"type":97,"tag":105,"props":374,"children":375},{},[376],{"type":103,"value":377},"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":97,"tag":105,"props":379,"children":380},{},[381],{"type":97,"tag":116,"props":382,"children":385},{"alt":383,"src":384},"hints devtools hydration screenshot","./.github/assets/devtools-hydration.png",[],{"type":97,"tag":329,"props":387,"children":389},{"id":388},"third-party-scripts",[390],{"type":103,"value":391},"Third-Party Scripts",{"type":97,"tag":105,"props":393,"children":394},{},[395],{"type":103,"value":396},"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":97,"tag":105,"props":398,"children":399},{},[400],{"type":97,"tag":116,"props":401,"children":404},{"alt":402,"src":403},"hints devtools third-party screenshot","./.github/assets/devtools-thirdparties.png",[],{"type":97,"tag":329,"props":406,"children":408},{"id":407},"unused-imported-component-detection-lazy-load",[409],{"type":103,"value":410},"Unused Imported Component Detection (Lazy Load)",{"type":97,"tag":105,"props":412,"children":413},{},[414],{"type":103,"value":415},"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":97,"tag":105,"props":417,"children":418},{},[419],{"type":97,"tag":116,"props":420,"children":423},{"alt":421,"src":422},"hints devtools lazy-load screenshot","./.github/assets/devtools-lazy-load.png",[],{"type":97,"tag":178,"props":425,"children":427},{"id":426},"how-it-works",[428],{"type":103,"value":429},"How It Works",{"type":97,"tag":329,"props":431,"children":433},{"id":432},"performance-monitoring",[434],{"type":103,"value":435},"Performance Monitoring",{"type":97,"tag":105,"props":437,"children":438},{},[439,441,446],{"type":103,"value":440},"Nuxt Hints uses ",{"type":97,"tag":198,"props":442,"children":444},{"className":443},[],[445],{"type":103,"value":350},{"type":103,"value":447}," 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":97,"tag":329,"props":449,"children":451},{"id":450},"hydration-mismatch-detection",[452],{"type":103,"value":453},"Hydration Mismatch Detection",{"type":97,"tag":105,"props":455,"children":456},{},[457],{"type":103,"value":458},"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":97,"tag":329,"props":460,"children":462},{"id":461},"third-party-script-analysis",[463],{"type":103,"value":464},"Third-Party Script Analysis",{"type":97,"tag":105,"props":466,"children":467},{},[468],{"type":103,"value":469},"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":97,"tag":329,"props":471,"children":473},{"id":472},"unused-component-detection-lazy-load",[474],{"type":103,"value":475},"Unused Component Detection (Lazy Load)",{"type":97,"tag":105,"props":477,"children":478},{},[479,481,487],{"type":103,"value":480},"At build time, a Vite plugin analyzes your component imports to identify statically imported ",{"type":97,"tag":198,"props":482,"children":484},{"className":483},[],[485],{"type":103,"value":486},".vue",{"type":103,"value":488}," 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":97,"tag":105,"props":490,"children":491},{},[492,494,500,502,508,510,516],{"type":103,"value":493},"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":97,"tag":198,"props":495,"children":497},{"className":496},[],[498],{"type":103,"value":499},"Lazy",{"type":103,"value":501}," (e.g., ",{"type":97,"tag":198,"props":503,"children":505},{"className":504},[],[506],{"type":103,"value":507},"\u003CLazyHeavyComponent>",{"type":103,"value":509},") or use ",{"type":97,"tag":198,"props":511,"children":513},{"className":512},[],[514],{"type":103,"value":515},"defineAsyncComponent",{"type":103,"value":517}," so it is only downloaded when needed.",{"type":97,"tag":329,"props":519,"children":521},{"id":520},"html-validate-integration",[522],{"type":103,"value":523},"HTML Validate integration",{"type":97,"tag":105,"props":525,"children":526},{},[527,529,540,542,547],{"type":103,"value":528},"Nuxt Hints includes a built-in HTML validation feature powered by ",{"type":97,"tag":109,"props":530,"children":533},{"href":531,"rel":532},"https://html-validate.org/",[113],[534],{"type":97,"tag":198,"props":535,"children":537},{"className":536},[],[538],{"type":103,"value":539},"html-validate",{"type":103,"value":541},". On every server-rendered response, the module intercepts the HTML output and runs it through ",{"type":97,"tag":198,"props":543,"children":545},{"className":544},[],[546],{"type":103,"value":539},{"type":103,"value":548},".",{"type":97,"tag":105,"props":550,"children":551},{},[552],{"type":97,"tag":116,"props":553,"children":556},{"alt":554,"src":555},"hints html-validate screenshot","./.github/assets/devtools-html-validate.png",[],{"type":97,"tag":329,"props":558,"children":560},{"id":559},"example-console-output",[561],{"type":103,"value":562},"Example Console Output",{"type":97,"tag":105,"props":564,"children":565},{},[566],{"type":103,"value":567},"When Nuxt Hints detects issues, you'll see clear warnings in your browser console:",{"type":97,"tag":190,"props":569,"children":573},{"className":570,"code":572,"language":103},[571],"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",[574],{"type":97,"tag":198,"props":575,"children":576},{"__ignoreMap":14},[577],{"type":103,"value":572},{"type":97,"tag":190,"props":579,"children":582},{"className":580,"code":581,"language":103},[571],"[@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",[583],{"type":97,"tag":198,"props":584,"children":585},{"__ignoreMap":14},[586],{"type":103,"value":581},{"type":97,"tag":178,"props":588,"children":590},{"id":589},"module-options",[591],{"type":103,"value":592},"Module Options",{"type":97,"tag":105,"props":594,"children":595},{},[596,598,603,605,610],{"type":103,"value":597},"Configure the module in your ",{"type":97,"tag":198,"props":599,"children":601},{"className":600},[],[602],{"type":103,"value":212},{"type":103,"value":604}," under the ",{"type":97,"tag":198,"props":606,"children":608},{"className":607},[],[609],{"type":103,"value":8},{"type":103,"value":611}," key:",{"type":97,"tag":190,"props":613,"children":617},{"className":614,"code":615,"language":616,"meta":14,"style":195},"language-typescript","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",[618],{"type":97,"tag":198,"props":619,"children":620},{"__ignoreMap":14},[621],{"type":103,"value":615},{"type":97,"tag":329,"props":623,"children":625},{"id":624},"feature-toggles",[626],{"type":103,"value":627},"Feature toggles",{"type":97,"tag":105,"props":629,"children":630},{},[631,633,638,640,645],{"type":103,"value":632},"Each feature accepts either a ",{"type":97,"tag":153,"props":634,"children":635},{},[636],{"type":103,"value":637},"boolean",{"type":103,"value":639}," or an ",{"type":97,"tag":153,"props":641,"children":642},{},[643],{"type":103,"value":644},"object",{"type":103,"value":646}," for finer control:",{"type":97,"tag":648,"props":649,"children":650},"table",{},[651,670],{"type":97,"tag":652,"props":653,"children":654},"thead",{},[655],{"type":97,"tag":656,"props":657,"children":658},"tr",{},[659,665],{"type":97,"tag":660,"props":661,"children":662},"th",{},[663],{"type":103,"value":664},"Key",{"type":97,"tag":660,"props":666,"children":667},{},[668],{"type":103,"value":669},"Description",{"type":97,"tag":671,"props":672,"children":673},"tbody",{},[674,692,709,726,743],{"type":97,"tag":656,"props":675,"children":676},{},[677,687],{"type":97,"tag":678,"props":679,"children":680},"td",{},[681],{"type":97,"tag":198,"props":682,"children":684},{"className":683},[],[685],{"type":103,"value":686},"hydration",{"type":97,"tag":678,"props":688,"children":689},{},[690],{"type":103,"value":691},"Detect and inspect hydration mismatches",{"type":97,"tag":656,"props":693,"children":694},{},[695,704],{"type":97,"tag":678,"props":696,"children":697},{},[698],{"type":97,"tag":198,"props":699,"children":701},{"className":700},[],[702],{"type":103,"value":703},"lazyLoad",{"type":97,"tag":678,"props":705,"children":706},{},[707],{"type":103,"value":708},"Flag unused imported components that could be lazy-loaded",{"type":97,"tag":656,"props":710,"children":711},{},[712,721],{"type":97,"tag":678,"props":713,"children":714},{},[715],{"type":97,"tag":198,"props":716,"children":718},{"className":717},[],[719],{"type":103,"value":720},"webVitals",{"type":97,"tag":678,"props":722,"children":723},{},[724],{"type":103,"value":725},"Track LCP, INP, and CLS metrics",{"type":97,"tag":656,"props":727,"children":728},{},[729,738],{"type":97,"tag":678,"props":730,"children":731},{},[732],{"type":97,"tag":198,"props":733,"children":735},{"className":734},[],[736],{"type":103,"value":737},"thirdPartyScripts",{"type":97,"tag":678,"props":739,"children":740},{},[741],{"type":103,"value":742},"Audit third-party scripts for performance and security",{"type":97,"tag":656,"props":744,"children":745},{},[746,755],{"type":97,"tag":678,"props":747,"children":748},{},[749],{"type":97,"tag":198,"props":750,"children":752},{"className":751},[],[753],{"type":103,"value":754},"htmlValidate",{"type":97,"tag":678,"props":756,"children":757},{},[758,760],{"type":103,"value":759},"Validate server-rendered HTML with ",{"type":97,"tag":109,"props":761,"children":763},{"href":531,"rel":762},[113],[764],{"type":103,"value":539},{"type":97,"tag":105,"props":766,"children":767},{},[768],{"type":103,"value":769},"When using the object syntax, the following flags are available:",{"type":97,"tag":190,"props":771,"children":773},{"className":614,"code":772,"language":616,"meta":14,"style":195},"{\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",[774],{"type":97,"tag":198,"props":775,"children":776},{"__ignoreMap":14},[777],{"type":103,"value":772},{"type":97,"tag":178,"props":779,"children":781},{"id":780},"development",[782],{"type":103,"value":783},"Development",{"type":97,"tag":190,"props":785,"children":787},{"className":192,"code":786,"language":194,"meta":14,"style":195},"# 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",[788],{"type":97,"tag":198,"props":789,"children":790},{"__ignoreMap":14},[791],{"type":103,"value":786},{"type":97,"tag":793,"props":794,"children":795},"style",{},[796],{"type":103,"value":14},{"title":14,"searchDepth":38,"depth":38,"links":798},[799,800,801,809,817,820],{"id":180,"depth":38,"text":183},{"id":217,"depth":38,"text":220},{"id":319,"depth":38,"text":322,"children":802},[803,805,806,807,808],{"id":331,"depth":804,"text":334},3,{"id":350,"depth":804,"text":353},{"id":369,"depth":804,"text":372},{"id":388,"depth":804,"text":391},{"id":407,"depth":804,"text":410},{"id":426,"depth":38,"text":429,"children":810},[811,812,813,814,815,816],{"id":432,"depth":804,"text":435},{"id":450,"depth":804,"text":453},{"id":461,"depth":804,"text":464},{"id":472,"depth":804,"text":475},{"id":520,"depth":804,"text":523},{"id":559,"depth":804,"text":562},{"id":589,"depth":38,"text":592,"children":818},[819],{"id":624,"depth":804,"text":627},{"id":780,"depth":38,"text":783}]