diff --git a/content/blog/44.nuxt-hints-v1.md b/content/blog/44.nuxt-hints-v1.md new file mode 100644 index 000000000..c057a48cd --- /dev/null +++ b/content/blog/44.nuxt-hints-v1.md @@ -0,0 +1,134 @@ +--- +title: Nuxt Hints 1.0 +description: Nuxt Hints helps you to find improvements at runtime in your Nuxt application. +navigation: false +image: /assets/blog/nuxt-hints-v1.png +authors: + - name: Julien Huang + avatar: + src: https://github.com/huang-julien.png + to: https://bsky.app/profile/JulienHuang_dev +date: 2026-03-19T00:00:00.000Z +category: Release +--- + +## We are very excited to move Nuxt hints from alpha stage to 1.0.0 ! + +Last week at [VueJS Amsterdam](https://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 + +```bash [Terminal] +npx nuxt module add hints +``` + +### 🚀 Rich DevTools UI + +Nuxt Hints integrates directly into the [Nuxt DevTools](https://devtools.nuxt.com/) 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. + +::tip +Every feature in Nuxt Hints surfaces results both in the DevTools UI **and** in your browser console. You can configure each feature independently to only show in one or the other. +:: + +### 💧 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](https://html-validate.org/). 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`](https://github.com/GoogleChrome/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: + +```text +[@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: + +```text +[@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., ``) 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: + +```ts [nuxt.config.ts] +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: + +```ts [nuxt.config.ts] +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 application’s assets, especially 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. \ No newline at end of file diff --git a/public/assets/blog/nuxt-hints-v1.png b/public/assets/blog/nuxt-hints-v1.png new file mode 100644 index 000000000..134000f00 Binary files /dev/null and b/public/assets/blog/nuxt-hints-v1.png differ