We are very excited to move Nuxt hints from alpha stage to 1.0.0 !
Last week at VueJS Amsterdam, @nuxt/hints has been released in version 1.0.
This has been a long journey since its first commit in 2023. The vision of the Nuxt team has always been that better DX will improve end-users UX. By releasing this module, the goal is to help Nuxt developers to improve their Nuxt applications.
Getting started
npx nuxt module add hints
🚀 Rich DevTools UI
Nuxt Hints integrates directly into the Nuxt DevTools with a dedicated panel. The homepage gives you a summary of all detected issues at a glance, across every category. Performance, hydration, third-party scripts, and more.
From there you can drill into each category, inspect specific elements, and get actionable recommendations without leaving your development environment.
💧 Hydration Mismatch Debugging
Hydration mismatches are one of the most frustrating issues in SSR applications. Nuxt Hints 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 and presents them in a diff viewer.
No more guessing what went wrong, you can see the exact differences between what the server rendered and what the client produced.
✅ HTML Validation
Nuxt Hints includes a built-in HTML validation feature powered by html-validate. On every server-rendered response, the module intercepts the HTML output and runs it through html-validate, catching invalid markup, accessibility issues, and common HTML mistakes before they reach production.
⚡ Web Vitals Analysis
Nuxt Hints uses web-vitals to gather Core Web Vitals metrics in real time. It monitors LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) and provides detailed attribution for each.
When a metric needs improvement, you get context-aware advice tied to the specific element causing the issue. For example, if your LCP element has loading="lazy", Nuxt Hints will warn you:
[@nuxt/hints:performance] LCP Element should not have `loading="lazy"`
Learn more: https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given
📦 Third-Party Script Auditing
Third-party scripts are a common source of performance bottlenecks. Nuxt Hints tracks every script loaded on your page using a combination of a Nitro plugin and client-side observers. The dashboard shows loading times, render-blocking status, and security attributes for each script.
It also checks for missing crossorigin attributes and other security best practices:
[@nuxt/hints] Third-party script "https://cdn.example.com/script.js" is missing crossorigin attribute.
Consider adding crossorigin="anonymous" for better security and error reporting.
🧩 Unused Component Detection
At build time, a Vite plugin analyzes your component imports to identify statically imported .vue 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. The recommended fix is to either prefix the component with Lazy (e.g., <LazyHeavyComponent />) or use defineAsyncComponent so it is only downloaded when needed.
This can have a significant impact on your initial bundle size and loading performance.
⚙️ Configurable Features
Every feature can be toggled on or off independently. If you feel overwhelmed by the amount of feedback, you can disable some features and address things step by step:
export default defineNuxtConfig({
hints: {
devtools: true,
features: {
hydration: true,
lazyLoad: true,
webVitals: true,
thirdPartyScripts: true,
htmlValidate: true,
},
},
})
Each feature accepts either a boolean or an object for finer control over console logs and DevTools visibility:
export default defineNuxtConfig({
hints: {
features: {
webVitals: {
logs: true,
devtools: true,
},
// Disable console noise for hydration, keep DevTools only
hydration: {
logs: false,
devtools: true,
},
},
},
})
Moving forward
With 1.0 being released, this is only the beginning.
Production hints
Nuxt Hints will continue providing more information to developers. At the moment, it is a dev-only module. In the future, Nuxt Hints will let you report poor metrics in runtime applications.
Font and scripts performance hints
Nuxt Hints will provide more precise metrics on some of your applications assets, especially on fonts and scripts.
Your ideas !
Nuxt is shaped by people and will continue to be driven by this community. Your ideas and feedback are always welcome and have an impact on the future of Nuxt.
Credits
Huge thanks to our early contributors and testers, without whom this module wouldn't be what it is today.