Vue Pinia Best Practices

by vuejs-aic9d355ff23f6MITListed Oct 8, 2026Updated Oct 8, 2026

Pinia stores, state management patterns, store setup, and reactivity with stores.

AI-generated overview

Reference guidance on Vue Pinia store setup, reactivity gotchas, and state management patterns.

What it does: This skill is an instruction-only reference that indexes common Pinia problems and best practices, pointing to separate reference documents for each topic. It covers store setup errors, reactivity issues such as destructuring and method binding, and state patterns like URL-backed ephemeral filters and conventions for large apps. It produces guidance and pointers rather than code or files.
When to use it: Use it when working with Vue applications that use Pinia and you hit store setup errors, lost reactivity, or need conventions for state management. It is also useful when deciding where ephemeral filter state should live or how to structure stores in a larger app.
Requirements: No scripts or tooling are required; it is instructions and reference documents only. The agent needs access to the bundled reference files.

Pinia best practices, common gotchas, and state management patterns.

Getting "getActivePinia was called" error at startup → See pinia-no-active-pinia-error [blocked]
Setup stores missing state in DevTools or SSR → See pinia-setup-store-return-all-state [blocked]

Store destructuring stops updating UI reactively → See pinia-store-destructuring-breaks-reactivity [blocked]
Store methods lose context in template calls → See store-method-binding-parentheses [blocked]

Filters reset on refresh or can't be shared → See state-url-for-ephemeral-filters [blocked]
Building production app without DevTools or conventions → See state-use-pinia-for-large-apps [blocked]

Source and attribution

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.