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.