skills.rest
runkids
runkidsCOMMUNITY
Explore all skills by this author →
GitHub

vue-pinia-best-practices

Audit Pinia stores and enforce Vue 3 state management best practices.

11|2|Updated Jan 15, 2026
Search Tags:#devtools#best-practices#state-management#reactivity#vue3#pinia
One-click install
npx skills add https://github.com/runkids/my-skills --skill vue-pinia-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-pinia-best-practices
Source: https://github.com/runkids/my-skills/tree/main/vue-pinia-best-practices
Command: npx skills add https://github.com/runkids/my-skills --skill vue-pinia-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pinia best practices help Vue 3 projects avoid common state management pitfalls such as exposing wrong state from setup stores, destructuring state which breaks reactivity, and misusing store references in templates.

Core Features & Use Cases

  • Guidance on returning all state from setup stores to preserve SSR, DevTools visibility, and plugin compatibility.
  • Reframing store usage with storeToRefs to maintain reactivity when destructuring.
  • Patterns for correct template bindings, lazy store access, and consistent naming conventions.

Quick Start

Audit your Pinia stores and update setup stores to expose all state, getters, and actions; use storeToRefs for reactive state; avoid top-level store usage to keep patterns consistent across the codebase.

Frequently Asked Questions about vue-pinia-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid breaking reactivity when destructuring Pinia store state in Vue 3?▼

Use storeToRefs to destructure state while preserving reactivity. storeToRefs converts state properties to refs, maintaining reactivity when you extract values from your setup store instead of accessing them directly.

What's the correct way to expose state from a Pinia setup store?▼

Return all state, getters, and actions explicitly from setup stores. Complete state exposure ensures SSR compatibility, DevTools visibility, and plugin support across your Vue 3 application.

Why does my Pinia store state lose reactivity when I destructure it in my template?▼

Direct destructuring breaks reactivity because plain values don't maintain the ref connection. Wrap destructured state with storeToRefs or access state through store properties to keep template bindings reactive.

Should I access Pinia stores at the top level of my Vue 3 components?▼

Avoid top-level store usage in component scope; this breaks consistency across your codebase. Use lazy store access within component methods or setup functions to maintain predictable, uniform patterns.

Do I need external tooling to validate Pinia best practices in my Vue project?▼

No. This guidance identifies and enforces Pinia patterns without requiring external tools, focusing on setup vs options stores, correct state exposure, and reactivity validation across typical codebases.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

vue-pinia-best-practices

Configure Pinia stores in Vue 3 apps to prevent setup timing errors.

Community
Intermediate
emilneuraz-aiemilneuraz-ai

pinia

Define and consume type-safe Pinia stores in Vue applications.

Community
Advanced
PatternsDevPatternsDev
235

state-management

Create reactive Vue stores with Pinia defineStore for shared state.

Official
Intermediate
mgd34msumgd34msu
4

pinia

Manage Vue.js application state with Pinia stores, getters, actions, and plugins.

Community
Intermediate