Compétences vue-debug-guides
📦

vue-debug-guides

Révision du contenu r1 Sûr ⚡ Contient des scripts🌐 Accès réseau⚙️ Commandes externes📁 Accès au système de fichiers

Déboguer les problèmes Vue 3 plus rapidement

Les erreurs Vue 3 proviennent souvent de comportements subtils de réactivité, de cycle de vie, asynchrones ou SSR. Cette compétence fournit à Claude et Codex des guides ciblés pour diagnostiquer ces problèmes et choisir des corrections plus sûres.

Prend en charge: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 78 Bronze

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

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

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/hyf0-vue-debug-guides.md manifest signé GET /api/skills/hyf0-vue-debug-guides/manifest lockfile signé GET /api/skills/hyf0-vue-debug-guides/lockfile

Tester

Utilisation de « vue-debug-guides ». Une ref de composant est null lorsque v-if bascule l'élément.

Résultat attendu:

  • Explique pourquoi v-if supprime l'élément et efface la ref.
  • Suggère des vérifications null, le bon timing avec nextTick ou v-show lorsqu'un accès persistant est requis.
  • Liste les tests pour le comportement au basculement et au rendu initial.

Utilisation de « vue-debug-guides ». Une page SSR signale une incompatibilité d'hydratation après le déploiement.

Résultat attendu:

  • Sépare les causes probables entre HTML invalide, état réservé au navigateur, données asynchrones et valeurs aléatoires.
  • Recommande de comparer le markup serveur rendu avec l'état client.
  • Suggère des corrections ciblées comme des wrappers client-only ou des données initiales stables.

Utilisation de « vue-debug-guides ». Un watcher récupère des données obsolètes après des changements rapides dans le champ de recherche.

Résultat attendu:

  • Identifie l'absence de nettoyage asynchrone comme cause probable.
  • Recommande l'annulation ou l'invalidation des anciennes requêtes.
  • Note que le debouncing peut réduire les besoins de nettoyage, mais ne les remplace pas.

Audit de sécurité

Sûr
v6 • 09/07/2026 Ouvrir le rapport versionné

The static analyzer flagged many risky strings, but the evidence shows they are Markdown reference examples for Vue 3 debugging topics. I found no executable malware behavior, prompt injection, credential access, or unauthorized network activity in the reviewed findings.

140
Fichiers analysés
22,211
Lignes analysées
0
Éléments à examiner
0
Faux positifs ignorés

Facteurs de risque

⚡ Contient des 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
🌐 Accès réseau (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
⚙️ Commandes externes (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
📁 Accès au système de fichiers (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
Le dernier audit statique et sémantique terminé n’a détecté aucun constat de sécurité confirmé. Cela ne prouve pas que le skill est sans effets secondaires.
Audité par: claude Voir l’historique des audits →
Partager et citer ce rapport

Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.

Ouvrir le rapport versionné
Évaluation de sécurité

Copier le lien du rapport

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

Badge Markdown

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

Badge HTML

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

Carte intégrable

<iframe src="https://skillstore.io/embed/skills/hyf0-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>
Citations académiques (APA · BibTeX · CFF)

Citation APA

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

Citation BibTeX

@techreport{hyf0-hyf0-vue-debug-guides-2026, author = {hyf0}, title = {vue-debug-guides security audit report (audit version 6)}, institution = {Skillstore}, year = {2026}, number = {6}, url = {https://skillstore.io/skills/hyf0-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: "hyf0" date-released: "2026-07-09" url: "https://skillstore.io/skills/hyf0-vue-debug-guides/audits/6" identifiers: - type: other value: "skillstore:hyf0-vue-debug-guides:audit:6" description: "Skillstore immutable audit report identifier"

Comparer les variantes

2 variantes installables

Chaque auteur reste un skill installable distinct. La variante recommandée est classée selon les preuves Skillstore.

Pourquoi cette variante est première

Utilisation Skillstore plus élevée
vuejs-ai Recommandé

vuejs-ai-vue-debug-guides

Score Skillstore 78
Niveau de confiance des preuves Élevé
Utilisation Skillstore 22
Mis à jour

2026-09-09

hyf0 Actuelle

hyf0-vue-debug-guides

Score Skillstore 78
Niveau de confiance des preuves Élevé
Utilisation Skillstore 16
Mis à jour

2026-09-09

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Élevé
55
Architecture
85
Maintenabilité
87
Contenu
72
Communauté
83
Conformité aux spécifications

Ce que vous pouvez créer

Corriger un avertissement d'exécution Vue

Identifier la règle Vue probable derrière un avertissement et obtenir un parcours de correction ciblé.

Déboguer les incompatibilités d'hydratation SSR

Comparer le comportement serveur et client pour le HTML invalide, les API réservées au navigateur, les valeurs aléatoires et les données asynchrones.

Examiner les patterns de composants Vue

Vérifier les composants pour repérer les pièges courants liés à la réactivité, aux templates, aux slots, aux transitions et à TypeScript avant la publication.

Essayez ces prompts

Expliquer un avertissement Vue 
Use vue-debug-guides to explain this Vue warning in simple terms and list the first three things I should check: [paste warning].
Trouver la cause racine probable 
Use vue-debug-guides to diagnose this Vue 3 component issue. Focus on reactivity, lifecycle timing, and template rules: [paste symptom and component].
Examiner un bug d'hydratation SSR 
Use vue-debug-guides to analyze this SSR hydration mismatch. Compare browser-only APIs, invalid HTML, async data, randomness, and client-only rendering: [paste details].
Auditer un pattern Vue complexe 
Use vue-debug-guides to review this Vue 3 pattern for hidden reactivity, async cleanup, slot, transition, and TypeScript pitfalls. Provide prioritized fixes: [paste code].

Bonnes pratiques

  • Collez l'avertissement exact, l'extrait du composant et la version de Vue lorsque vous demandez de l'aide.
  • Demandez le plus petit chemin de reproduction avant de modifier l'architecture.
  • Validez la correction proposée dans le navigateur et en mode SSR lorsque l'hydratation est concernée.

Éviter

  • Ne considérez pas chaque avertissement Vue comme un bug du framework avant d'avoir vérifié les mises en garde documentées.
  • Ne copiez pas les extraits d'exemple sans adapter les chemins, le nettoyage et les limites de sécurité.
  • Ne supprimez pas les erreurs d'hydratation ou TypeScript avant d'avoir trouvé la cause racine.

Foire aux questions

Cette compétence corrige-t-elle automatiquement le code Vue ?
Elle fournit des conseils de diagnostic et de correction. Claude Code peut appliquer des changements lorsque vous lui demandez de modifier votre projet.
Est-elle uniquement destinée à Vue 3 ?
Oui. Les guides se concentrent sur Vue 3, Composition API, script setup et les comportements associés à Vue 3.
Peut-elle aider avec les erreurs d'hydratation SSR ?
Oui. Elle inclut des guides sur les causes d'incompatibilité d'hydratation, les API propres à certaines plateformes, Suspense, Teleport et les problèmes d'état partagé.
Peut-elle déboguer les problèmes TypeScript dans les composants Vue ?
Oui. Elle couvre les pièges TypeScript courants pour les props, emits, template refs, gestionnaires d'événements et objets réactifs.
Nécessite-t-elle un accès réseau ?
Non. La compétence est un guide de référence. Les appels réseau indiqués dans les constats sont des exemples dans la documentation.
Comment obtenir le meilleur résultat ?
Fournissez le symptôme exact, le code du composant pertinent, la version de Vue, l'outil de build et indiquez si SSR est impliqué.

Détails du développeur

Auteur

hyf0

Licence

MIT

Révision Skillstore

r1

Avis de version

L’auteur n’a déclaré aucune version.

Dépôt

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

Réf

1ffa7643651792ccb4bd3b15d924d2c97edff755

Récence de maintenance

21/07/2026

Utilisation

8 téléchargements · 322 vues

Structure de fichiers

📁 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