skills.rest
zhenpengLai
zhenpengLaiCOMMUNITY
Explore all skills by this author →
GitHub

vue-pinia-best-practices

Diagnose and fix Pinia store setup, reactivity, and state management issues in Vue 3 applications.

Updated Mar 31, 2026
Search Tags:#state management#reactivity#vue3#ssr#pinia#vue router#storetorefs
One-click install
npx skills add https://github.com/zhenpengLai/myuseskill --skill vue-pinia-best-practices-zhenpenglai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-pinia-best-practices
Source: https://github.com/zhenpengLai/myuseskill/tree/main/vue-pinia-best-practices
Command: npx skills add https://github.com/zhenpengLai/myuseskill --skill vue-pinia-best-practices-zhenpenglai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Pinia stores in Vue 3 applications frequently fail due to initialization order errors, broken reactivity from destructuring, and missing state in setup stores, causing crashes, stale UI, and SSR hydration failures that are hard to debug. ## Core Features & Use Cases - Error Diagnosis: Resolve the "getActivePinia was called but there was no active Pinia" error by fixing plugin order, module-level store calls, and script setup timing. - Reactivity Fixes: Restore reactive updates by using storeToRefs for state and getters while destructuring actions directly. - State Architecture Guidance: Decide when to use URL query parameters for shareable filters versus Pinia stores, and when Pinia is required over hand-rolled reactive objects. - Use Case: A developer's Vue app crashes on startup with a Pinia error and the product filter state resets on refresh; this Skill provides the exact plugin ordering fix and a URL-based filter pattern to resolve both. ## Quick Start Ask the assistant to diagnose why your Vue app throws "getActivePinia was called but there was no active Pinia" on startup.

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 fix the "getActivePinia was called but there was no active Pinia" error?▼

This error occurs when a store is used before Pinia is installed on the Vue app. Call app.use(createPinia()) before app.use(router) and app.mount(), and never call useStore() in module-level top-level code.

How do I destructure a Pinia store without losing reactivity?▼

Use storeToRefs() from Pinia to destructure state and getters as reactive refs. Actions can be destructured directly from the store since they are plain functions that do not need reactivity.

Should I use Pinia or a hand-rolled reactive store in Vue 3?▼

Use Pinia for applications with shared state across components, team collaboration, or SSR needs, since it provides DevTools integration, TypeScript inference, HMR, and plugins. Hand-rolled reactive() stores are acceptable only for small single-developer prototypes.

Why is my setup store state missing in DevTools or after SSR hydration?▼

Setup stores only expose what you return from the setup function. State not returned is invisible to DevTools, plugins, and SSR serialization, so return every ref, computed, and function from the store.

When should filter state go in the URL instead of a Pinia store?▼

Put filters, search queries, pagination, and sort order in URL query parameters when users need shareable, bookmarkable, refresh-safe views. Keep private or session state like form drafts and auth tokens in stores.

Related Skills

Explore More Software Engineering Skills→
awfixers-stuffawfixers-stuff

clerk-vue-patterns

Integrate Clerk Vue composables, route guards, and Pinia stores in Vue 3 applications.

Official
Advanced
kaxuna1kaxuna1

zustand

Create a Zustand store with localStorage persistence for React UI state.

Community
Intermediate
IntelliTectIntelliTect

use-composition-api

Build Vue 3 components with the Composition API, TypeScript, and Vuetify.

Official
Intermediate
AratKruglikAratKruglik
9

vue-state-management

Guide Vue 3 developers in selecting state management approaches for SPAs.

Community
Advanced