# Build Pinia Stores for Vue Apps

Vue teams need consistent state patterns across components, tests, SSR, and Nuxt apps. This skill provides focused Pinia guidance with examples for stores, plugins, hydration, and testing.

## Install

```bash
npx skillstore add antfu/pinia
```

## Metadata

- - Slug: antfu-pinia
- - Version: 1.0.0
- - Author: antfu
- - GitHub username: antfu
- - License: MIT
- - Repository: https://github.com/antfu/skills/tree/main/skills/pinia/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, network, filesystem, env\_access
- - Quality score: 75
- - Public page: https://skillstore.pages.dev/skills/antfu-pinia
- - Manifest: https://skillstore.pages.dev/api/skills/antfu-pinia/manifest

## Capabilities

- Explains Option Stores and Setup Stores with state, getters, and actions.
- Guides reactivity-safe destructuring with storeToRefs and direct action use.
- Documents Pinia plugins, custom properties, custom options, and TypeScript augmentation.
- Covers testing with fresh Pinia instances, createTestingPinia, stubs, spies, and mocked stores.
- Provides SSR, Nuxt, hydration, outside-component usage, and HMR guidance.

## Use Cases

- Create a Store Pattern: Design a Pinia store using Setup Store or Option Store syntax with typed state, getters, and actions.
- Prepare Store Tests: Set up isolated Pinia tests with createPinia, createTestingPinia, action stubs, and typed mocked stores.
- Fix SSR and Nuxt Usage: Apply Pinia guidance for auto imports, route middleware, hydration, and avoiding cross-request state pollution.

## Prompt Templates

### Define a Basic Store

```
Create a Pinia store for this Vue feature. Include state, getters, actions, and explain whether Setup Store or Option Store fits best.
```

### Preserve Reactivity

```
Review this component and store usage. Show where to use storeToRefs, where actions can be destructured, and what could break reactivity.
```

### Test Store Behavior

```
Design tests for this Pinia store and its consuming component. Include initial state, action stubbing choices, and typed mock guidance.
```

### Audit Nuxt SSR Flow

```
Review this Nuxt Pinia setup for SSR safety. Check middleware usage, hydration order, plugin registration, and cross-request state risks.
```

## Limitations

- It is documentation guidance, not an executable Pinia generator.
- It is based on Pinia v3.0.4 content generated on 2026-01-28.
- It does not inspect a project unless the user provides files or context.
- It cannot verify runtime behavior without running the application tests.

## Best Practices

- Prefer Setup Stores for complex logic, composables, watchers, and reusable state behavior.
- Use storeToRefs when destructuring state or getters, and destructure actions directly.
- Create fresh Pinia instances for tests and SSR requests to avoid shared state leaks.

## Anti Patterns

- Do not call stores at module scope before Pinia is installed.
- Do not read circular store state during setup in two stores.
- Do not return non-serializable DOM refs from Setup Stores.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T09:05:37.619\+00:00
- - Summary: Static analysis reported many command execution, network, filesystem, credential, and heuristic combination findings, but review found markdown documentation examples rather than executable skill logic. No prompt injection, malicious exfiltration intent, or runtime automation was found; the residual risk is low because examples mention browser storage, environment checks, install commands, and source URLs.

## Stats

- - Views: 211
- - Downloads: 18
- - Favorites: 1
- - Popularity score: 0