Does this skill help with Pinia in SSR environments?

Yes, it includes patterns for 'setup stores' to ensure all state is correctly returned and hydrated during Server-Side Rendering.

Why does destructuring my Pinia store break reactivity?

Destructuring a store object in Vue loses its reactive proxy. This skill teaches you how to use storeToRefs or access properties directly to maintain UI updates.

How do I fix the 'getActivePinia' error in Pinia?

This skill provides specific guidance on ensuring Pinia is properly initialized before any stores are accessed, usually by ensuring store calls happen within the proper app lifecycle.

Can I use this for URL-based state management?

Absolutely. It includes patterns for syncing ephemeral filters with the URL, allowing state to be shared via links and persisted on page refresh.

Vue Pinia Best Practices

Name: Vue Pinia Best Practices
Author: stevessr

bystevessr

0•

開発者ツール

Optimizes Vue.js state management by implementing Pinia best practices, troubleshooting reactivity issues, and establishing robust store patterns.

This skill provides a comprehensive set of guidelines and solutions for managing state in Vue.js applications using Pinia. It addresses common architectural pitfalls, such as reactivity loss during store destructuring and 'getActivePinia' initialization errors, while offering proven patterns for setup stores and SSR compatibility. Ideal for developers building large-scale frontend applications, it ensures that state management remains scalable, debuggable, and performant by following official and community-tested conventions that bridge the gap between simple reactivity and production-grade architecture.

主な機能

01Prevents reactivity loss by providing safe patterns for store destructuring

020 GitHub stars

03Standardizes store method binding to prevent context loss in templates

04Optimizes store setup for compatibility with Vue DevTools and Server-Side Rendering

05Troubleshoots common Pinia errors like 'getActivePinia was called' at startup

06Implements ephemeral filter patterns using URL state for better user experience

ユースケース

01Architecting state management for large-scale production Vue applications

02Implementing deep-linkable filters and state that persists across page refreshes

03Debugging why a Vue component is not updating when Pinia store state changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stevessr/dotsfiles vue-pinia-best-practices

For use in Claude.ai and ChatGPT

Download Skill