Nuxt Hints: A new core module dropped right before the end of the year 🎁

If you’ve ever worked with Server Side Rendered applications, you’ve quickly realized hydration errors can be a pain. What’s even more painful is finding where the errors come from and how to resolve them. Well, look no further! The new nuxt/hints module can be just the right tool for you to use!

Nuxt Hints gives real-time feedback on your app’s performance, accessibility, and security and it does it directly inside your browser via the devtools. While you could still manually audit your site (e.g. running external tooling, code reviews, etc.), with nuxt/hints you get actionable insights as you build. You spot slow-loading third-party scripts, hydration mismatches, or suboptimal layouts for web vitals.

Before diving deeper into it, let’s make some things clear:

Nuxt Hints integrates directly into the Nuxt DevTools, so the insights are not based on production information (but they can still be very useful). Moreover, this module probably becomes more useful for bigger and more complex projects.

What to expect from nuxt/hints

Once you installed the module (and added it to your nuxt config file), just run your application normally and open DevTools. Click on the Hints icon and the hints panel will appear, summarizing detected issues:

• Real-time Web Vitals metrics (LCP, INP, CLS) + element-level attribution & advice for improvement.
• Hydration mismatch detection: side-by-side diff between server-rendered HTML and client-hydrated HTML to help debug mismatches. What’s really valuable here is that you can click on the component that’s causing the issue and jump directly to the source code to check out the implementation!
• Third-party script auditing: lists external scripts, shows their performance/impact, and gives security/performance warning or suggestions.

Lastly, Nuxt Hints is still in its early days. As it matures beyond alpha, this module has the potential to become an integral part of DevTool or it could go a totally different way.

For any modern Nuxt project, Hints is a “nice to have” guardrail. It helps you catch common issues early, avoid regressions, and keep quality high without leaving your editor.