Vue 3 debugging guides: symptom-to-fix references across the framework - **name_fr:** Guides de débogage Vue 3 : références symptôme→solution dans tout le framework - **tl_en:** Diagnose Vue runtime errors, warnings and async failures — reactivity, templates, refs, SSR, transitions, more - **tl_fr:** Diagnostiquer les erreurs runtime Vue, warnings et échecs async — réactivité, templates, refs, SSR, transitions, plus - **creator:** @vuejs-ai - **type:** Agent skill - **url:** https://github.com/vuejs-ai/skills - **cat:** Frontend - **kws:** vue 3, debugging, troubleshooting, reactivity, templates, props, emits, ssr, hydration, composables, typescript - **license:** MIT **Description EN:** Curated by Skill Harbor — a symptom-driven debugging reference for Vue 3: dozens of "when you see X" entries across reactivity (missing `.value`, destructuring reactivity loss, proxy identity hazards, `markRaw` for non-reactive instances), computed (side effects, readonly returns, conditional dependencies), watchers (async cleanup, deep-watcher same-reference), components, props/emits, templates (`v-if`/`v-for` precedence, `v-else` rules, keys), template refs, `v-model` and forms (IME composition, iOS select bugs), events/modifiers, lifecycle and cleanup, slots, provide/inject, attrs, composables, Composition API vs React-hooks mental models, animation, TypeScript SFC pitfalls, async components, render functions, KeepAlive, transitions, Teleport, Suspense, SSR/hydration mismatches and performance — each entry pointing to a focused reference file. By @vuejs-ai, listed here with credit to its creator. Honest caveats: community-maintained by the vuejs-ai project, not the official Vue.js team — it tracks documented Vue 3 idioms but is not the canonical docs; depth varies per entry; pairs with the `vue-best-practices` skill already listed on Skill Harbor. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une référence de débogage Vue 3 pilotée par les symptômes : des dizaines d'entrées « quand vous voyez X » couvrant la réactivité (`.value` manquant, perte de réactivité par déstructuration, pièges d'identité de proxy, `markRaw` pour les instances non réactives), les computed (effets de bord, retours readonly, dépendances conditionnelles), les watchers (nettoyage async, même-référence des deep watchers), les composants, props/emits, templates (précédence `v-if`/`v-for`, règles de `v-else`, keys), template refs, `v-model` et formulaires (composition IME, bugs de select iOS), événements/modificateurs, lifecycle et nettoyage, slots, provide/inject, attrs, composables, modèles mentaux Composition API vs hooks React, animation, écueils TypeScript SFC, composants async, fonctions de rendu, KeepAlive, transitions, Teleport, Suspense, mismatches SSR/hydratation et performance — chaque entrée pointant vers un fichier de référence ciblé. Crédit : @vuejs-ai. Bémols honnêtes : maintenu par la communauté du projet vuejs-ai, pas par l'équipe officielle de Vue.js — il suit les idiomes documentés de Vue 3 mais n'est pas la documentation canonique ; la profondeur varie par entrée ; s'associe au skill `vue-best-practices` déjà listé sur Skill Harbor. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a Vue 3 project to debug; none otherwise Install "Vue 3 debugging guides: symptom-to-fix references across the framework" for me. Give my agent the symptom-driven Vue 3 debugging reference — reactivity, computed, watchers, components, props/emits, templates, refs, forms, events, lifecycle, slots, provide/inject, composables, TypeScript, render functions, KeepAlive, transitions, Teleport, Suspense, SSR and performance — with the per-symptom reference files Repository: https://github.com/vuejs-ai/skills/blob/main/skills/vue-debug-guides/SKILL.md 1. Fetch the SKILL.md file (and its reference files) for the vuejs-ai-skills-vue-debug-guides skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "vuejs-ai-skills-vue-debug-guides". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. describe the error or warning you're seeing so the right guide can be opened). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet Vue 3 à déboguer ; sinon aucun Installe-moi « Guides de débogage Vue 3 : références symptôme→solution dans tout le framework ». Donne à mon agent la référence de débogage Vue 3 pilotée par les symptômes — réactivité, computed, watchers, composants, props/emits, templates, refs, formulaires, événements, lifecycle, slots, provide/inject, composables, TypeScript, fonctions de rendu, KeepAlive, transitions, Teleport, Suspense, SSR et performance — avec les fichiers de référence par symptôme Dépôt : https://github.com/vuejs-ai/skills/blob/main/skills/vue-debug-guides/SKILL.md 1. Récupère le fichier SKILL.md (et ses fichiers de référence) du skill vuejs-ai-skills-vue-debug-guides depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « vuejs-ai-skills-vue-debug-guides ». 4. Vérifie sans aucun appel réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. décrire l'erreur ou le warning rencontré pour ouvrir le bon guide). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---

Diagnostiquer les erreurs runtime Vue, warnings et échecs async — réactivité, templates, refs, SSR, transitions, plus - **creator:** @vuejs-ai - **type:** Agent skill - **url:** https://github.com/vuejs-ai/skills - **cat:** Frontend - **kws:** vue 3, debugging, troubleshooting, reactivity, templates, props, emits, ssr, hydration, composables, typescript - **license:** MIT **Description EN:** Curated by Skill Harbor — a symptom-driven debugging reference for Vue 3: dozens of "when you see X" entries across reactivity (missing `.value`, destructuring reactivity loss, proxy identity hazards, `markRaw` for non-reactive instances), computed (side effects, readonly returns, conditional dependencies), watchers (async cleanup, deep-watcher same-reference), components, props/emits, templates (`v-if`/`v-for` precedence, `v-else` rules, keys), template refs, `v-model` and forms (IME composition, iOS select bugs), events/modifiers, lifecycle and cleanup, slots, provide/inject, attrs, composables, Composition API vs React-hooks mental models, animation, TypeScript SFC pitfalls, async components, render functions, KeepAlive, transitions, Teleport, Suspense, SSR/hydration mismatches and performance — each entry pointing to a focused reference file. By @vuejs-ai, listed here with credit to its creator. Honest caveats: community-maintained by the vuejs-ai project, not the official Vue.js team — it tracks documented Vue 3 idioms but is not the canonical docs; depth varies per entry; pairs with the `vue-best-practices` skill already listed on Skill Harbor. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une référence de débogage Vue 3 pilotée par les symptômes : des dizaines d'entrées « quand vous voyez X » couvrant la réactivité (`.value` manquant, perte de réactivité par déstructuration, pièges d'identité de proxy, `markRaw` pour les instances non réactives), les computed (effets de bord, retours readonly, dépendances conditionnelles), les watchers (nettoyage async, même-référence des deep watchers), les composants, props/emits, templates (précédence `v-if`/`v-for`, règles de `v-else`, keys), template refs, `v-model` et formulaires (composition IME, bugs de select iOS), événements/modificateurs, lifecycle et nettoyage, slots, provide/inject, attrs, composables, modèles mentaux Composition API vs hooks React, animation, écueils TypeScript SFC, composants async, fonctions de rendu, KeepAlive, transitions, Teleport, Suspense, mismatches SSR/hydratation et performance — chaque entrée pointant vers un fichier de référence ciblé. Crédit : @vuejs-ai. Bémols honnêtes : maintenu par la communauté du projet vuejs-ai, pas par l'équipe officielle de Vue.js — il suit les idiomes documentés de Vue 3 mais n'est pas la documentation canonique ; la profondeur varie par entrée ; s'associe au skill `vue-best-practices` déjà listé sur Skill Harbor. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a Vue 3 project to debug; none otherwise Install "Vue 3 debugging guides: symptom-to-fix references across the framework" for me. Give my agent the symptom-driven Vue 3 debugging reference — reactivity, computed, watchers, components, props/emits, templates, refs, forms, events, lifecycle, slots, provide/inject, composables, TypeScript, render functions, KeepAlive, transitions, Teleport, Suspense, SSR and performance — with the per-symptom reference files Repository: https://github.com/vuejs-ai/skills/blob/main/skills/vue-debug-guides/SKILL.md 1. Fetch the SKILL.md file (and its reference files) for the vuejs-ai-skills-vue-debug-guides skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "vuejs-ai-skills-vue-debug-guides". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. describe the error or warning you're seeing so the right guide can be opened). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet Vue 3 à déboguer ; sinon aucun Installe-moi « Guides de débogage Vue 3 : références symptôme→solution dans tout le framework ». Donne à mon agent la référence de débogage Vue 3 pilotée par les symptômes — réactivité, computed, watchers, composants, props/emits, templates, refs, formulaires, événements, lifecycle, slots, provide/inject, composables, TypeScript, fonctions de rendu, KeepAlive, transitions, Teleport, Suspense, SSR et performance — avec les fichiers de référence par symptôme Dépôt : https://github.com/vuejs-ai/skills/blob/main/skills/vue-debug-guides/SKILL.md 1. Récupère le fichier SKILL.md (et ses fichiers de référence) du skill vuejs-ai-skills-vue-debug-guides depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « vuejs-ai-skills-vue-debug-guides ». 4. Vérifie sans aucun appel réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. décrire l'erreur ou le warning rencontré pour ouvrir le bon guide). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---

Version :