Nuxt.js Debugging Guide

This guide provides a systematic approach to debugging Nuxt.js applications, covering SSR/SSG issues, Nitro server problems, hydration mismatches, composables, and more.

Common Error Patterns

1. Hydration Mismatches

Hydration mismatches occur when the server-rendered HTML differs from what Vue expects on the client.

Symptoms:

• Console warning: "Hydration text/node mismatch"
• Content flickers or changes after page load
• [Vue warn]: Hydration completed but contains mismatches

Common Causes:

// BAD: Using browser-only APIs during SSR
const windowWidth = window.innerWidth // Errors on server