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

Ready to run

npx skills add https://github.com/runkids/my-skills --skill vue-pinia-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

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.