Pinia gotchas: best practices and error patterns for Vue stores - **name_fr:** Écueils Pinia : bonnes pratiques et patterns d'erreur pour les stores Vue - **tl_en:** Avoid common Pinia mistakes — getActivePinia errors, broken reactivity, state patterns - **tl_fr:** Éviter les erreurs Pinia courantes — erreurs getActivePinia, réactivité cassée, patterns d'état - **creator:** @vuejs-ai - **type:** Agent skill - **url:** https://github.com/vuejs-ai/skills - **cat:** Frontend - **kws:** pinia, vue, state management, gotchas, best practices, reactivity, devtools, ssr - **license:** MIT **Description EN:** Curated by Skill Harbor — a concise Pinia gotchas guide from the vuejs-ai project: symptom entries covering store setup (the "getActivePinia was called" startup error, setup stores missing state in DevTools or SSR), reactivity (store destructuring breaking UI updates, store methods losing context in template calls), and state patterns (ephemeral filters that reset on refresh → keep state in the URL, using Pinia conventions for large apps) — each 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 or Pinia team; a compact gotchas guide, not a full documentation reference — pair it with the comprehensive Pinia reference (antfu-skills-pinia) also listed here for depth. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un guide concis d'écueils Pinia du projet vuejs-ai : des entrées de symptômes couvrant le setup de stores (l'erreur de démarrage « getActivePinia was called », les setup stores sans état dans DevTools ou SSR), la réactivité (déstructuration de store cassant les mises à jour UI, méthodes de store perdant leur contexte dans les appels de template), et les patterns d'état (filtres éphémères réinitialisés au refresh → garder l'état dans l'URL, utiliser les conventions Pinia pour les grosses apps) — chacun 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 ou Pinia ; un guide compact d'écueils, pas une référence documentaire complète — l'associer à la référence Pinia complète (antfu-skills-pinia) également listée ici pour approfondir. 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 using Pinia Install "Pinia gotchas: best practices and error patterns for Vue stores" for me. Give my agent the Pinia gotchas guide — store setup errors, reactivity pitfalls and state patterns — with the per-symptom reference files Repository: https://github.com/vuejs-ai/skills/blob/main/skills/vue-pinia-best-practices/SKILL.md 1. Fetch the SKILL.md file (and its reference files) for the vuejs-ai-skills-vue-pinia-best-practices 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-pinia-best-practices". 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. nothing — open it whenever a Pinia store misbehaves). 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 utilisant Pinia Installe-moi « Écueils Pinia : bonnes pratiques et patterns d'erreur pour les stores Vue ». Donne à mon agent le guide d'écueils Pinia — erreurs de setup de stores, pièges de réactivité et patterns d'état — avec les fichiers de référence par symptôme Dépôt : https://github.com/vuejs-ai/skills/blob/main/skills/vue-pinia-best-practices/SKILL.md 1. Récupère le fichier SKILL.md (et ses fichiers de référence) du skill vuejs-ai-skills-vue-pinia-best-practices 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-pinia-best-practices ». 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. rien — à ouvrir dès qu'un store Pinia se comporte mal). 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. ``` ---

Éviter les erreurs Pinia courantes — erreurs getActivePinia, réactivité cassée, patterns d'état - **creator:** @vuejs-ai - **type:** Agent skill - **url:** https://github.com/vuejs-ai/skills - **cat:** Frontend - **kws:** pinia, vue, state management, gotchas, best practices, reactivity, devtools, ssr - **license:** MIT **Description EN:** Curated by Skill Harbor — a concise Pinia gotchas guide from the vuejs-ai project: symptom entries covering store setup (the "getActivePinia was called" startup error, setup stores missing state in DevTools or SSR), reactivity (store destructuring breaking UI updates, store methods losing context in template calls), and state patterns (ephemeral filters that reset on refresh → keep state in the URL, using Pinia conventions for large apps) — each 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 or Pinia team; a compact gotchas guide, not a full documentation reference — pair it with the comprehensive Pinia reference (antfu-skills-pinia) also listed here for depth. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un guide concis d'écueils Pinia du projet vuejs-ai : des entrées de symptômes couvrant le setup de stores (l'erreur de démarrage « getActivePinia was called », les setup stores sans état dans DevTools ou SSR), la réactivité (déstructuration de store cassant les mises à jour UI, méthodes de store perdant leur contexte dans les appels de template), et les patterns d'état (filtres éphémères réinitialisés au refresh → garder l'état dans l'URL, utiliser les conventions Pinia pour les grosses apps) — chacun 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 ou Pinia ; un guide compact d'écueils, pas une référence documentaire complète — l'associer à la référence Pinia complète (antfu-skills-pinia) également listée ici pour approfondir. 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 using Pinia Install "Pinia gotchas: best practices and error patterns for Vue stores" for me. Give my agent the Pinia gotchas guide — store setup errors, reactivity pitfalls and state patterns — with the per-symptom reference files Repository: https://github.com/vuejs-ai/skills/blob/main/skills/vue-pinia-best-practices/SKILL.md 1. Fetch the SKILL.md file (and its reference files) for the vuejs-ai-skills-vue-pinia-best-practices 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-pinia-best-practices". 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. nothing — open it whenever a Pinia store misbehaves). 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 utilisant Pinia Installe-moi « Écueils Pinia : bonnes pratiques et patterns d'erreur pour les stores Vue ». Donne à mon agent le guide d'écueils Pinia — erreurs de setup de stores, pièges de réactivité et patterns d'état — avec les fichiers de référence par symptôme Dépôt : https://github.com/vuejs-ai/skills/blob/main/skills/vue-pinia-best-practices/SKILL.md 1. Récupère le fichier SKILL.md (et ses fichiers de référence) du skill vuejs-ai-skills-vue-pinia-best-practices 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-pinia-best-practices ». 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. rien — à ouvrir dès qu'un store Pinia se comporte mal). 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 :