Skills vue-debug-guides
📦

vue-debug-guides

Content revision r1 Safe ⚡ Contains scripts🌐 Network access⚙️ External commands📁 Filesystem access

Debug Vue 3 Runtime Issues Faster

Vue 3 failures often come from reactivity, lifecycle, template, or SSR edge cases. This skill routes symptoms to focused debugging guides with practical fixes.

Supports: Claude Codex Code(CC)
🥉 78 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "vue-debug-guides" from https://skillstore.io/skills/vuejs-ai-vue-debug-guides.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-debug-guides/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/vuejs-ai-vue-debug-guides.md Signed manifest GET /api/skills/vuejs-ai-vue-debug-guides/manifest Signed lockfile GET /api/skills/vuejs-ai-vue-debug-guides/lockfile

Test it

Using "vue-debug-guides". A watcher fetches data, but older responses overwrite newer search results.

Expected outcome:

Use the async cleanup guidance. Check cancellation, stale response guards, and whether rapid input should be debounced before fetching.

Using "vue-debug-guides". A computed property changes application state during rendering.

Expected outcome:

Move side effects out of the computed getter. Use a watcher, lifecycle hook, or explicit event handler for state changes.

Using "vue-debug-guides". A component renders differently after SSR hydration.

Expected outcome:

Compare server-only and client-only branches first. Check invalid HTML, browser-only APIs, random values, dates, and shared request state.

Security Audit

Safe
v6 • 7/9/2026 Open versioned report

All 264 static findings were reviewed as documentation false positives. The skill contains Markdown Vue debugging guides with illustrative snippets and no executable installer, command runner, network exfiltration logic, or prompt injection text.

140
Files scanned
22,211
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚡ Contains scripts (24)
reference/async-component-error-handling.md:19 reference/async-component-error-handling.md:31 reference/async-component-error-handling.md:47 reference/async-component-error-handling.md:62 reference/async-component-error-handling.md:84 reference/async-component-keepalive-ref-issue.md:18 reference/async-component-keepalive-ref-issue.md:46 reference/async-component-suspense-control.md:26 reference/async-component-suspense-control.md:47 reference/async-component-vue-router.md:24 reference/async-component-vue-router.md:31 reference/async-component-vue-router.md:50 reference/async-component-vue-router.md:55 reference/async-component-vue-router.md:102 reference/composition-api-script-setup-async-context.md:123 reference/computed-array-mutation.md:125 reference/rendering-resolve-component-for-string-names.md:58 reference/ssr-platform-specific-apis.md:242 reference/ssr-platform-specific-apis.md:185 reference/suspense-ssr-hydration-issues.md:33 reference/ts-shallowref-for-dynamic-components.md:142 reference/ts-shallowref-for-dynamic-components.md:157 reference/ts-shallowref-for-dynamic-components.md:158 reference/ts-shallowref-for-dynamic-components.md:159
🌐 Network access (43)
reference/checkbox-true-false-value-form-submission.md:88 reference/composable-avoid-hidden-side-effects.md:184 reference/composable-call-location-restrictions.md:77 reference/composable-tovalue-inside-watcheffect.md:37 reference/composable-tovalue-inside-watcheffect.md:69 reference/computed-no-side-effects.md:40 reference/computed-no-side-effects.md:74 reference/computed-no-side-effects.md:100 reference/define-expose-before-await.md:36 reference/define-expose-before-await.md:95 reference/define-expose-before-await.md:118 reference/define-expose-before-await.md:161 reference/define-expose-before-await.md:162 reference/define-expose-before-await.md:183 reference/dynamic-argument-constraints.md:70 reference/dynamic-argument-constraints.md:109 reference/plugin-global-properties-sparingly.md:36 reference/plugin-global-properties-sparingly.md:23 reference/provide-inject-default-value-factory.md:201 reference/provide-inject-synchronous-setup.md:52 reference/reactivity-markraw-for-non-reactive.md:66 reference/reactivity-markraw-for-non-reactive.md:78 reference/ssr-platform-specific-apis.md:160 reference/ssr-platform-specific-apis.md:203 reference/ssr-platform-specific-apis.md:162 reference/ssr-platform-specific-apis.md:163 reference/ssr-platform-specific-apis.md:164 reference/state-ssr-cross-request-pollution.md:11 reference/template-functions-no-side-effects.md:61 reference/template-functions-no-side-effects.md:125 reference/transition-unmount-hook-timing.md:112 reference/transition-unmount-hook-timing.md:39 reference/transition-unmount-hook-timing.md:89 reference/transition-unmount-hook-timing.md:43 reference/transition-unmount-hook-timing.md:95 reference/watch-async-cleanup.md:33 reference/watch-async-cleanup.md:71 reference/watch-async-cleanup.md:97 reference/watch-async-creation-memory-leak.md:50 reference/watcheffect-async-dependency-tracking.md:33 reference/watcheffect-async-dependency-tracking.md:72 reference/watcheffect-async-dependency-tracking.md:86 reference/watcheffect-async-dependency-tracking.md:117
⚙️ External commands (50)
reference/composition-api-vs-react-hooks-differences.md:90-96 reference/computed-no-side-effects.md:46-56 reference/computed-no-side-effects.md:85-93 reference/computed-return-value-readonly.md:143-156 reference/dynamic-argument-constraints.md:75-89 reference/provide-inject-debugging-challenges.md:86-91 reference/provide-inject-debugging-challenges.md:91-96 reference/provide-inject-debugging-challenges.md:126-127 reference/provide-inject-debugging-challenges.md:127-128 reference/provide-inject-debugging-challenges.md:128-137 reference/provide-inject-default-value-factory.md:43-46 reference/provide-inject-synchronous-setup.md:200-201 reference/provide-inject-synchronous-setup.md:201-208 reference/rendering-render-function-h-import-vue3.md:63-67 reference/rendering-render-function-return-from-setup.md:31-36 reference/rendering-render-function-return-from-setup.md:50-55 reference/rendering-render-function-return-from-setup.md:138-144 reference/rendering-render-function-slots-as-functions.md:79-81 reference/rendering-resolve-component-for-string-names.md:105-111 reference/sfc-named-exports-forbidden.md:116-118 reference/tailwind-dynamic-class-generation.md:26-36 reference/tailwind-dynamic-class-generation.md:36-40 reference/template-expressions-restrictions.md:65-82 reference/template-expressions-restrictions.md:82-92 reference/template-functions-no-side-effects.md:162-183 reference/template-ref-v-for-order.md:48-60 reference/template-ref-v-for-order.md:79-96 reference/template-ref-v-for-order.md:123-139 reference/template-ref-v-for-order.md:157-169 reference/ts-shallowref-for-dynamic-components.md:47 reference/ts-shallowref-for-dynamic-components.md:142-146 reference/watch-async-cleanup.md:33-45 reference/watch-async-cleanup.md:71-83 reference/watch-async-cleanup.md:97-112 reference/watch-deep-same-object-reference.md:71-81 reference/watch-deep-same-object-reference.md:81-84 reference/watch-deep-same-object-reference.md:84-88 reference/watch-flush-timing.md:85-99 reference/watch-reactive-property-getter.md:31-36 reference/watch-reactive-property-getter.md:36-38 reference/watch-reactive-property-getter.md:50-58 reference/watch-reactive-property-getter.md:58-66 reference/watch-reactive-property-getter.md:66-69 reference/watch-reactive-property-getter.md:82-85 reference/watch-reactive-property-getter.md:97-105 reference/watcheffect-async-dependency-tracking.md:33-54 reference/watcheffect-async-dependency-tracking.md:72-86 reference/watcheffect-async-dependency-tracking.md:86-98 reference/watcheffect-async-dependency-tracking.md:118-123 SKILL.md:7
📁 Filesystem access (5)
reference/ssr-platform-specific-apis.md:191 reference/ssr-platform-specific-apis.md:199 reference/ssr-platform-specific-apis.md:191 reference/ssr-platform-specific-apis.md:199 reference/v-model-number-modifier-behavior.md:105
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/vuejs-ai-vue-debug-guides/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/vuejs-ai-vue-debug-guides/security.svg)](https://skillstore.io/skills/vuejs-ai-vue-debug-guides?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/vuejs-ai-vue-debug-guides?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-debug-guides/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-debug-guides.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

vuejs-ai. (2026). vue-debug-guides security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-debug-guides/audits/6

BibTeX citation

@techreport{vuejs-ai-vuejs-ai-vue-debug-guides-2026, author = {vuejs-ai}, title = {vue-debug-guides security audit report (audit version 6)}, institution = {Skillstore}, year = {2026}, number = {6}, url = {https://skillstore.io/skills/vuejs-ai-vue-debug-guides/audits/6}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vue-debug-guides security audit report (audit version 6)" version: "unspecified" type: report authors: - name: "vuejs-ai" date-released: "2026-07-09" url: "https://skillstore.io/skills/vuejs-ai-vue-debug-guides/audits/6" identifiers: - type: other value: "skillstore:vuejs-ai-vue-debug-guides:audit:6" description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Higher Skillstore usage
vuejs-ai Recommended Current

vuejs-ai-vue-debug-guides

Skillstore Score 78
Evidence Confidence High
Skillstore usage 16
Updated

2026-08-21

hyf0

hyf0-vue-debug-guides

Skillstore Score 78
Evidence Confidence High
Skillstore usage 10
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
72
Community
83
Spec Compliance

What You Can Build

Fix hydration warnings

Identify likely causes when server-rendered Vue markup differs from the client render.

Trace reactivity bugs

Find why refs, computed values, watchers, or reactive objects update at unexpected times.

Review migration issues

Check Vue 3 behavior changes around components, emits, templates, render functions, and app configuration.

Try These Prompts

Find the right guide 
I am seeing this Vue 3 symptom: [describe warning, error, or broken behavior]. Which vue-debug-guides references should I use first, and why?
Explain a Vue warning 
Explain this Vue warning in plain language: [paste warning]. List likely causes, files to inspect, and the safest first fix.
Debug SSR hydration 
Help debug this Vue SSR hydration mismatch. The server output differs from the client after [describe action]. Use the relevant guides and propose checks in order.
Plan a complex investigation 
Create a Vue 3 debugging plan for this issue: [describe reproduction]. Consider reactivity, watchers, async components, lifecycle timing, and SSR risks.

Best Practices

  • Start with the exact warning, stack trace, or symptom before choosing a guide.
  • Verify fixes with a minimal reproduction before changing shared components.
  • Check SSR, async, and lifecycle timing when a bug only appears after navigation or hydration.

Avoid

  • Applying a guide without confirming the Vue feature involved.
  • Treating documentation examples as complete production code.
  • Ignoring browser, SSR, or input method differences during debugging.

Frequently Asked Questions

What does this skill help debug?
It helps debug Vue 3 runtime errors, warnings, reactivity bugs, template issues, async failures, and SSR hydration problems.
Does it execute my Vue application?
No. It provides reference guidance and debugging steps based on the symptoms and context you provide.
Can it help with Vue SSR issues?
Yes. It includes guides for hydration mismatch causes, request state isolation, and platform-specific API usage.
Is this only for advanced Vue users?
No. Beginners can use symptom-based prompts, while experienced users can request deeper debugging plans.
Does it cover TypeScript with Vue?
Yes. It includes references for typed props, event handlers, template refs, reactive typing, and dynamic components.
Can I use it with Claude, Codex, and Claude Code?
Yes. The skill metadata lists support for Claude, Codex, and Claude Code.

Developer Details

Author

vuejs-ai

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

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

Ref

26421118b848d9f1efc0aa169d8a7a9e7e0a877e

Maintenance freshness

7/18/2026

Usage

13 downloads · 354 views

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