docs(blog): add nuxt hints 1.0 announcement

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., `<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:
+
+```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.