Is it compatible with Nuxt SSR?

Yes, it features dedicated patterns for SSR, including safe state serialization with devalue and correct store hydration timing to prevent state leakage.

Does this skill support Vue 2 projects?

Yes, while optimized for Vue 3, it provides guidance for Vue 2.7 or earlier versions using the @vue/composition-api plugin.

How does it prevent lost reactivity in Vue components?

The skill enforces the use of storeToRefs() when destructuring state or getters, which is the standard way to maintain reactivity in Vue templates.

Can this skill help migrate my project from Vuex?

Absolutely. It includes specific patterns for mapping mutations to actions, removing namespacing, and converting rootState access into store imports.

Does it provide help with TypeScript configuration?

Yes, it offers specific solutions for common TypeScript hurdles, such as explicit return typing for getters that utilize the 'this' context.

Pinia v3 Vue State Management

Name: Pinia v3 Vue State Management
Author: secondsky

bysecondsky

•

开发者工具

Streamlines Vue 3 state management by providing optimized patterns for Pinia stores, SSR hydration, and seamless Vuex migrations.

This skill equips Claude with deep expertise in Pinia v3, the official state management library for Vue. It provides production-ready guidance on implementing both Option and Setup store syntaxes, managing complex SSR hydration patterns in Nuxt, and executing successful migrations from Vuex. By using this skill, developers can avoid common pitfalls such as lost reactivity from direct destructuring, TypeScript inference issues in getters, and circular store dependencies, ensuring a robust and scalable state architecture.

主要功能

01Automated Vuex to Pinia migration strategies and checklists

0221 GitHub stars

03Optimized Pinia store definitions for both Option and Setup syntaxes

04Advanced state hydration and reactivity protection techniques

05Comprehensive SSR and Nuxt 3/4 integration patterns

06Structured unit and component testing patterns using @pinia/testing

使用场景

01Debugging complex reactivity and hydration errors in Vue 3 projects

02Refactoring legacy Vuex modules into modern, type-safe Pinia stores

03Architecting scalable state management for high-performance Nuxt applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills pinia-v3

For use in Claude.ai and ChatGPT

Download Skill