Habilidades vue-debug-guides
📦

vue-debug-guides

Seguro

Vue 3 Debugging Guide

También disponible en: 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.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

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

Resultado esperado:

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.

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

Resultado esperado:

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.

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

Resultado esperado:

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.

Auditoría de seguridad

Seguro
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
Archivos escaneados
22,211
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
23
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

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

Prueba estos 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?

Mejores prácticas

  • 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

Evitar

  • 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

Preguntas frecuentes

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.

Detalles del desarrollador

Autor

vuejs-ai

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📁 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