vue-debug-guides

Vue 3 hydration mismatch errors occur when server-rendered HTML differs from client output. This Skill provides actionable SSR hydration guidance covering mismatch scenarios, top-level await in script setup, and Suspense considerations to diagnose and fix mismatches.

Vue 3 reactive objects lose reactivity when destructured or reassigned incorrectly. This Skill provides comprehensive debugging patterns for refs, reactive, computed, watch, and watchEffect to identify common reactivity gotchas and apply safe usage fixes.

Diagnosing Vue 3 Composition API lifecycle hook failures requires tracing execution order and async timing. This Skill provides concrete checks and best practices for lifecycle hooks to prevent frequent pitfalls in production Vue apps.

Top-level await in Vue 3 script setup requires Suspense boundaries to handle async dependencies. This Skill covers SSR hydration guidance and Suspense considerations with concrete examples to prevent runtime errors during server-side rendering.

Vue 3 watchEffect fails to trigger when reactive dependencies are not properly accessed during execution. This Skill provides debugging steps and safe usage guidelines with cross-reference links to official docs for correcting reactivity tracking.

Common Vue 3 runtime errors include reactivity loss, lifecycle timing issues, and hydration mismatches. This Skill provides actionable patterns, concrete checks, and best practices with examples to prevent frequent pitfalls in production Vue apps.