Agent skill · mindrally
vue-pinia
Vue 3 state management with Pinia using the Composition API, covering setup stores, SSR/Nuxt integration, persistence, and testing. Use when creating or refactoring Pinia stores, deciding what state belongs in a store versus a component, wiring stores into router guards, persisting store state to storage, or testing store actions with @pinia/testing.
What it needs
About 6k tokens when loaded.
What this skill does
Vue + Pinia Pinia is the standard state management library for Vue 3, and setup stores built with the Composition API give shared application state the same ergonomics as local ref/computed state. Workflow for Adding a Pinia Store 1. Decide if Pinia is the right tool — Confirm the state is shared across routes/components, not server cache data, and not purely local UI state (see State Ownership below). 2. Create the store file — Add one file per domain under stores/, e.g. stores/cart.ts, using defineStore('cart', () => { ... }). 3. Define state, getters, and actions — Declare state with ref/reactive, derive values with computed, and put all writes/side effects in functions (actions). 4. Return everything from the setup function — Return every piece of state, every getter, and every action so Pinia devtools, SSR, and plugins can track them. 5. Consume in components — Call the store at the top of <script setup>, destructure reactive state with storeToRefs(), and destructure actions directly. 6. Handle SSR/router-guard usage — Call the store from inside setup, a getter, an action, or pass the active Pinia instance explicitly outside setup contexts. 7. Add persistence and tests — Allowlist persisted fields, validate rehydrated data, and test actions directly with @pinia/testing. State Ownership Keep component-only state in the component with ref, reactive, or computed. Use Pinia for shared client state that spans routes, layouts, or unrelated component trees. Use route params and query strings for shareable navigation state — don't duplicate it into a store. Use Nuxt useFetch / useAsyncData, TanStack Query for Vue, or the existing API layer for server state — Pinia is for client state, not a data-fetching cache. Do not copy server cache data into Pinia unless it is an intentional editable draft, offline cache, or workflow snapshot with its own lifecycle. Store Structure Prefer setup stores with defineStore('name', () => { ... …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/vue-pinia