Stop making these Nuxt & Vue mistakes: introducing @nuxt/hints 1.0
summary
A dev‑only Nuxt module called @nuxt/hints 1.0 runs in development, compares server‑rendered HTML to the post‑hydration DOM per component to surface hydration mismatch diffs and file locations, runs html‑validate for HTML validation, reports LCP/CLS/INP via Web Vitals, flags unused imports that can be lazy loaded, measures third‑party script parse/blocking time, and opens the offending component in VS Code from Nuxt DevTools; it ships now as a concrete runtime detector and dashboard.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:53Production issues in Nuxt & Vue
- 6:24Hydration pitfalls
- 9:35Introducing @nuxt/hints
- 13:37Detecting hydration mismatches
- 15:22Web Vitals tracking
- 17:53Lazy loading optimizations
- 19:00@nuxt/hints DevTools
- 22:58Nuxt Hints 1.0 journey
- 25:12Releasing Nuxt Hints 1.0
- 26:20Future of @nuxt/hints
