pinia

Define and consume type-safe Pinia stores in Vue applications.

Updated Apr 4, 2026
One-click install
npx skills add https://github.com/emilneuraz-ai/neuraz-web --skill pinia-emilneuraz-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pinia
Source: https://github.com/emilneuraz-ai/neuraz-web/tree/main/.agents/skills/.agents/skills/pinia
Command: npx skills add https://github.com/emilneuraz-ai/neuraz-web --skill pinia-emilneuraz-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pinia provides a centralized, type-safe store system for Vue apps, replacing ad-hoc globals with predictable state management across components.

Core Features & Use Cases

  • Stores: defineStore for option and setup stores, with state, getters, and actions across components.
  • Extensibility & Composability: plugins, storeToRefs, and composables for reusable logic; SSR and Nuxt compatibility.
  • Best Practices: SSR hydration, testing, and outside-component usage; devtools integration.

Quick Start

Create a store with defineStore, then use it in a component to access state, getters, and actions.

Frequently Asked Questions about pinia

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a type-safe Vue store with Pinia?

Pinia provides centralized, type-safe state management for Vue by using defineStore to configure state, getters, and actions. This replaces ad-hoc globals with predictable state management across your application components.

Does Pinia work with Nuxt and server-side rendering?

Yes, Pinia works with Nuxt and server-side rendering. It supports SSR hydration and outside-component usage, allowing you to maintain type-safe state management during server-side rendering workflows.

What is the difference between option and setup stores in Pinia?

Option stores use a state, getters, and actions object structure, while setup stores use a function syntax returning computed properties and methods. Both defineStore approaches offer type-safe state management across Vue components.

Can I use Pinia plugins and composables for reusable logic?

Yes, you can use Pinia plugins and composables for reusable logic. The storeToRefs helper enables destructuring while maintaining reactivity, allowing you to create extensible, composable state management workflows.

Do I need Pinia v3 for Vue state management devtools integration?

Yes, Pinia v3 or higher is required for this Vue state management implementation. This version ensures proper devtools integration, SSR hydration, and TypeScript type safety across your application components.