debug-vue_skill

Overview

This skill systematically debugs Vue.js 3 applications and guides developers from symptom to fix. It covers reactivity, component updates, Pinia stores, computed caching, Teleport/Suspense, SSR hydration, Vite issues, vue-tsc type checks, and practical DevTools/console techniques. Use it to quickly isolate root causes and apply minimal, verifiable fixes.

How this skill works

The skill inspects common error patterns and maps symptoms to likely causes and concrete solutions. It walks through four debugging phases: identify the error type, isolate the problem, investigate the root cause with lifecycle/watchers/devtools, then apply and verify a fix. It also provides commands and snippets for Vite, vue-tsc, Pinia debugging, and targeted console strategies.

When to use it

• UI does not update after state changes or computed values stay stale
• Components fail to re-render when props or list data change
• Pinia store state appears inconsistent across components
• Suspense/Teleport rendering behaves unexpectedly or errors in SSR
• Build or dev-server issues with HMR, source maps, or type errors

Best practices

• Categorize errors first (template, runtime, reactivity, network) before changing code
• Prefer ref/toRefs/storeToRefs for reactive bindings and avoid direct destructuring
• Keep computed pure and log dependencies to confirm re-evaluation
• Use DevTools and store subscriptions to observe mutations and actions
• Apply the smallest fix, add a test or watch, then verify across SSR/client

Example use cases

• Fix a component that ignores updated props by adding a watch or correcting key binding on v-for
• Resolve stale Pinia getters by replacing destructured state with storeToRefs and enabling $subscribe
• Diagnose hydration mismatch by deferring browser-only code to onMounted or using ClientOnly
• Troubleshoot HMR problems with vite --debug, vite --force and enable build sourcemaps
• Track down a computed caching bug by logging inside the computed and checking reactive dependencies