vue-pinia-best-practices
A guide for Pinia state management, covering store setup, reactivity issues, and architectural best practices.
Install
mkdir -p .claude/skills/vue-pinia-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5959" && unzip -o skill.zip -d .claude/skills/vue-pinia-best-practices && rm skill.zipInstalls to .claude/skills/vue-pinia-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Pinia stores, state management patterns, store setup, and reactivity with stores.Key capabilities
- →Address 'getActivePinia was called' error
- →Ensure state visibility in DevTools and SSR for setup stores
- →Maintain reactivity after store destructuring
- →Preserve context for store methods in templates
- →Manage ephemeral filters using URL state
How it works
The skill provides solutions to common Pinia issues by referencing specific patterns for store setup, reactivity handling, and state management. It guides users to external documentation for detailed fixes.
Inputs & outputs
When to use vue-pinia-best-practices
- →Fix Pinia reactivity loss
- →Structure large application state
- →Configure stores for SSR
About this skill
Pinia best practices, common gotchas, and state management patterns.
Store Setup
- Getting "getActivePinia was called" error at startup → See pinia-no-active-pinia-error
- Setup stores missing state in DevTools or SSR → See pinia-setup-store-return-all-state
Reactivity
- Store destructuring stops updating UI reactively → See pinia-store-destructuring-breaks-reactivity
- Store methods lose context in template calls → See store-method-binding-parentheses
State Patterns
- Filters reset on refresh or can't be shared → See state-url-for-ephemeral-filters
- Building production app without DevTools or conventions → See state-use-pinia-for-large-apps
How it compares
This skill offers targeted solutions for known Pinia challenges, providing direct guidance for specific problems rather than general state management advice.
Compared to similar skills
vue-pinia-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue-pinia-best-practices (this skill) | 1 | 6mo | No flags | Beginner |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-testing-best-practices | 5 | 6mo | No flags | Intermediate |
| vue-debug-guides | 4 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by vuejs-ai
View all by vuejs-ai →You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vue-router-best-practices
antfu
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vueuse
onmax
Use when working with VueUse composables - provides reactive utilities for state, browser APIs, sensors, network, animations. Check VueUse before writing custom composables - most patterns already implemented.
frontend-vue-development
TencentBlueKing
前端 Vue 开发规范，涵盖 Vue 2/3 组件开发、Vuex 状态管理、路由配置、组件通信、样式规范、国际化。当用户进行前端开发、编写 Vue 组件、处理状态管理或实现页面交互时使用。