Skills vue-debug-guides
📦

vue-debug-guides

Safe

Vue 3 Debugging Guide

Also available from: hyf0

Vue 3 applications encounter runtime errors, warning messages, async failures, and SSR hydration issues that are difficult to debug. This skill provides comprehensive debugging guides and solutions for over 100 common Vue 3 development problems.

Supports: Claude Codex Code(CC)
🥉 74 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "vue-debug-guides". Why is my computed property not updating?

Expected outcome:

This is likely a computed property dependency issue. Computed properties in Vue 3 only track reactive dependencies accessed during their getter function. If you are destructuring a reactive object or accessing nested properties after a conditional, the computed may not update. See the 'computed-conditional-dependencies' guide for solutions.

Using "vue-debug-guides". How do I fix hydration mismatch in Vue SSR?

Expected outcome:

Hydration mismatches occur when server and client render different content. Common causes include: 1) Using browser-only APIs like localStorage or window, 2) Random values generated during render, 3) CSS causing layout differences. Use onMounted for browser APIs, seed random generators, and use ClientOnly components for dynamic content.

Using "vue-debug-guides". Why are my template refs undefined?

Expected outcome:

Template refs are only available after the component mounts. If you try to access them in setup(), they will be undefined. Use onMounted lifecycle hook or watchEffect with flush: 'post' to ensure refs are populated. Also check if the element is conditionally rendered with v-if - refs to v-if elements will be null when the condition is false.

Security Audit

Safe
v1 • 2/16/2026

This skill contains Vue.js debugging guides as markdown documentation. Static analysis flagged patterns in code examples within documentation. All findings are FALSE POSITIVES - backticks are markdown code formatting, URLs are documentation examples, and code snippets showing problematic patterns are educational content, not vulnerabilities. Safe for publication.

140
Files scanned
22,211
Lines analyzed
0
findings
1
Total audits
No security issues found
Audited by: claude

Quality Score

38
Architecture
100
Maintainability
87
Content
50
Community
100
Security
91
Spec Compliance

What You Can Build

Debug Reactivity Problems

When Vue components stop updating unexpectedly due to reactive reference issues, destructuring errors, or computed property problems

Fix SSR Hydration Errors

When server-side rendered Vue applications show hydration mismatch warnings or client-server content differences

Resolve Async Component Failures

When lazy-loaded components fail to load, show errors incorrectly, or cause memory leaks in Vue applications

Try These Prompts

Debug Vue Reactivity Issue 
My Vue 3 component is not updating when I change the data. The ref value changes but the template does not re-render. How do I debug this?
Fix Hydration Mismatch 
I am getting hydration mismatch warnings in my Nuxt application. The server HTML does not match the client. How do I fix this?
Resolve Watcher Not Firing 
My watcher is not triggering when a nested property changes in a reactive object. I am using deep: true but the callback never fires with the old and new values.
Debug Async Component Memory Leak 
I am using KeepAlive with async components and my application is showing memory leaks. The mounted hook runs multiple times but unmounted never fires. How do I fix this?

Best Practices

  • Use Vue DevTools to inspect component state, props, and emitted events in real-time
  • Enable Vue's strict mode during development to catch reactivity issues early
  • Always declare emits explicitly to avoid accidental duplicate event firing

Avoid

  • Destructuring reactive objects directly - this breaks reactivity and must use toRefs or toRaw
  • Using v-for without :key - causes rendering issues and unpredictable behavior
  • Defining emits only in runtime without type-based declarations - loses type safety

Frequently Asked Questions

Does this skill work with Vue 2?
No, this skill focuses specifically on Vue 3 debugging. Vue 2 has different APIs and patterns that require separate guides.
Can this skill help with performance issues?
Yes, the skill includes guides for performance problems like unnecessary re-renders, props stability, and computed object stability.
Does this cover Nuxt-specific issues?
Yes, there are guides for SSR hydration mismatches and server-side rendering issues that apply to Nuxt applications.
How do I debug reactive state not updating?
Use Vue DevTools to verify the reactive data is actually changing. Check for common issues like destructuring reactive objects, using the wrong ref type, or computed properties with conditional dependencies.
Can this help with TypeScript errors in Vue?
Yes, there are specific guides for TypeScript issues like defineProps imported types limitations, template ref null handling, and reactive generic arguments.
How do I debug async component loading failures?
Check the loading and error slots of defineAsyncComponent. Ensure error handling is in place and consider using Suspense for cleaner async component management.

Developer Details

Author

vuejs-ai

License

MIT

Repository

https://github.com/vuejs-ai/skills/tree/main/skills/vue-debug-guides/

Ref

main

File structure

📁 reference/

📄 animation-key-for-rerender.md

📄 animation-transitiongroup-performance.md

📄 async-component-error-handling.md

📄 async-component-keepalive-ref-issue.md

📄 async-component-suspense-control.md

📄 async-component-vue-router.md

📄 attrs-event-listener-merging.md

📄 checkbox-true-false-value-form-submission.md

📄 cleanup-side-effects.md

📄 click-events-on-components.md

📄 component-naming-conflicts.md

📄 component-ref-requires-defineexpose.md

📄 composable-avoid-hidden-side-effects.md

📄 composable-call-location-restrictions.md

📄 composable-naming-return-pattern.md

📄 composable-tovalue-inside-watcheffect.md

📄 composition-api-not-functional-programming.md

📄 composition-api-script-setup-async-context.md

📄 composition-api-vs-react-hooks-differences.md

📄 computed-array-mutation.md

📄 computed-conditional-dependencies.md

📄 computed-no-parameters.md

📄 computed-no-side-effects.md

📄 computed-return-value-readonly.md

📄 configure-app-before-mount.md

📄 declare-emits-for-documentation.md

📄 define-expose-before-await.md

📄 define-model-default-value-sync.md

📄 defineEmits-must-be-top-level.md

📄 defineEmits-no-runtime-and-type-mixed.md

📄 definemodel-object-mutation-no-emit.md

📄 dom-update-timing-nexttick.md

📄 dynamic-argument-constraints.md

📄 dynamic-component-registration-vite.md

📄 event-modifier-order-matters.md

📄 exact-modifier-for-precise-shortcuts.md

📄 fallthrough-attrs-overwrite-vue3.md

📄 in-dom-template-parsing-caveats.md

📄 inheritattrs-false-for-wrapper-components.md

📄 keepalive-router-nested-double-mount.md

📄 keepalive-transition-memory-leak.md

📄 keyup-modifier-timing.md

📄 lifecycle-dom-access-timing.md

📄 lifecycle-hooks-synchronous-registration.md

📄 lifecycle-ssr-awareness.md

📄 local-components-not-in-descendants.md

📄 mount-return-value.md

📄 multi-root-component-class-attrs.md

📄 native-event-collision-with-emits.md

📄 no-passive-with-prevent.md

📄 no-v-if-with-v-for.md

📄 perf-computed-object-stability.md

📄 perf-props-stability-update-optimization.md

📄 plugin-global-properties-sparingly.md

📄 plugin-install-before-mount.md

📄 plugin-prefer-provide-inject-over-global-properties.md

📄 plugin-typescript-type-augmentation.md

📄 prop-defineprops-scope-limitation.md

📄 provide-inject-debugging-challenges.md

📄 provide-inject-default-value-factory.md

📄 provide-inject-reactivity-not-automatic.md

📄 provide-inject-synchronous-setup.md

📄 reactive-destructuring.md

📄 reactivity-debugging-hooks.md

📄 reactivity-markraw-for-non-reactive.md

📄 reactivity-proxy-identity-hazard.md

📄 reactivity-same-tick-batching.md

📄 ref-value-access.md

📄 refs-in-collections-need-value.md

📄 render-function-avoid-internal-vnode-properties.md

📄 render-function-vnodes-must-be-unique.md

📄 rendering-render-function-h-import-vue3.md

📄 rendering-render-function-return-from-setup.md

📄 rendering-render-function-slots-as-functions.md

📄 rendering-resolve-component-for-string-names.md

📄 select-initial-value-ios-bug.md

📄 self-referencing-component-name.md

📄 sfc-named-exports-forbidden.md

📄 sfc-scoped-css-child-component-styling.md

📄 sfc-scoped-css-dynamic-content.md

📄 sfc-scoped-css-slot-content.md

📄 sfc-script-setup-reactivity.md

📄 slot-forwarding-to-child-components.md

📄 slot-implicit-default-content.md

📄 slot-name-reserved-prop.md

📄 slot-named-scoped-explicit-default.md

📄 slot-render-scope-parent-only.md

📄 slot-v-slot-on-components-or-templates-only.md

📄 ssr-hydration-mismatch-causes.md

📄 ssr-platform-specific-apis.md

📄 state-ssr-cross-request-pollution.md

📄 suspense-no-builtin-error-handling.md

📄 suspense-ssr-hydration-issues.md

📄 tailwind-dynamic-class-generation.md

📄 teleport-scoped-styles-limitation.md

📄 teleport-ssr-hydration.md

📄 teleport-target-must-exist.md

📄 template-expressions-restrictions.md

📄 template-functions-no-side-effects.md

📄 template-ref-null-with-v-if.md

📄 template-ref-unwrapping-top-level.md

📄 template-ref-v-for-order.md

📄 textarea-no-interpolation.md

📄 transition-group-flip-inline-elements.md

📄 transition-group-move-animation-position-absolute.md

📄 transition-group-no-default-wrapper-vue3.md

📄 transition-js-hooks-done-callback.md

📄 transition-nested-duration.md

📄 transition-reusable-scoped-style.md

📄 transition-router-view-appear.md

📄 transition-type-when-mixed.md

📄 transition-unmount-hook-timing.md

📄 ts-defineprops-boolean-default-false.md

📄 ts-defineprops-imported-types-limitations.md

📄 ts-event-handler-explicit-typing.md

📄 ts-reactive-no-generic-argument.md

📄 ts-shallowref-for-dynamic-components.md

📄 ts-template-ref-null-handling.md

📄 ts-template-type-casting.md

📄 ts-withdefaults-mutable-factory-function.md

📄 undeclared-emits-double-firing.md

📄 use-template-ref-vue35.md

📄 v-else-must-follow-v-if.md

📄 v-for-component-props.md

📄 v-for-computed-reverse-sort.md

📄 v-for-key-attribute.md

📄 v-for-range-starts-at-one.md

📄 v-if-null-check-order.md

📄 v-model-ignores-html-attributes.md

📄 v-model-ime-composition.md

📄 v-model-number-modifier-behavior.md

📄 v-show-template-limitation.md

📄 watch-async-cleanup.md

📄 watch-async-creation-memory-leak.md

📄 watch-deep-same-object-reference.md

📄 watch-flush-timing.md

📄 watch-reactive-property-getter.md

📄 watcheffect-async-dependency-tracking.md

📄 watcheffect-flush-post-for-refs.md

📄 SKILL.md