skilld
All skills
antfu avatar

/pinia

@d02c484 official
by Anthony Fuantfu/skills5.9k stars
335

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

Ask your Agent

Use this Skill: https://skilld.dev/gh/antfu/skills/pinia

This session only. Nothing lands on disk.

SKILL.md

≈46 tokens always: the name and description. ≈587 when used: this file. ≈7.6k more on demand in 10 files.

Pinia

Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.

The skill is based on Pinia v4.0.3, generated at 2026-09-25.

Core References

Topic Description Reference
Stores Defining stores, state, getters, actions, storeToRefs, subscriptions core-stores

Features

Extensibility

Topic Description Reference
Plugins Extend stores with custom properties, state, and behavior features-plugins

Composability

Topic Description Reference
Composables Using Vue composables within stores (VueUse, etc.) features-composables
Composing Stores Store-to-store communication, avoiding circular dependencies features-composing-stores

Best Practices

Topic Description Reference
Testing Unit testing with @pinia/testing, mocking, stubbing best-practices-testing
Outside Components Using stores in navigation guards, plugins, middlewares best-practices-outside-component

Advanced

Topic Description Reference
SSR Server-side rendering, state hydration advanced-ssr
Nuxt Nuxt integration, auto-imports, SSR best practices advanced-nuxt
HMR Hot module replacement for development advanced-hmr

Key Recommendations

  • Prefer Setup Stores for complex logic, composables, and watchers
  • Use storeToRefs() when destructuring state/getters to preserve reactivity
  • Actions can be destructured directly - they're bound to the store
  • Call stores inside functions not at module scope, especially for SSR
  • Add HMR support to each store for better development experience
  • Use @pinia/testing for component tests with mocked stores

Source: SKILL.md on GitHub

Third-party checks

No alerts3d5 checks · Risk SAFE
  • Gen Agent Trust Hub3d

    This skill is a safe and well-structured documentation reference for Pinia, the official Vue state management library. It provides accurate code snippets, follows security best practices (such as recommending XSS protection for SSR), and utilizes official packages from the Vue and Nuxt ecosystems.

  • Socket3d

    No alerts

  • Snyk3d

    Risk: LOW · No issues

  • Runlayer7mo

    1/11 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at d02c484. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 4 days ago

Capability

Other metadata
metadata
{
  "author": "Anthony Fu",
  "version": "2026.9.25",
  "source": "Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills"
}

Topics

README badge

README badge for antfu/skills/pinia

What it does

Pinia is the official Vue state management library providing type-safe, extensible stores with support for both Options and Composition APIs. Use it for defining reactive state, getters, and actions in Vue applications, with built-in TypeScript support and devtools integration.

Generated from the current SKILL.md.

Frequently asked

Does Pinia work with both Options API and Composition API?
Yes. Pinia supports both Options API and Composition API styles with first-class TypeScript support for both.
How do I preserve reactivity when destructuring state from a store?
Use `storeToRefs()` when destructuring state and getters to maintain reactivity. Actions can be destructured directly since they're bound to the store.
Can I use Pinia outside of Vue components?
Yes. Pinia stores work in navigation guards, plugins, middlewares, and other contexts outside components, but you should call stores inside functions rather than at module scope, especially for SSR.
How do I test components that use Pinia stores?
Use `@pinia/testing` for unit testing with built-in support for mocking and stubbing stores.
Does Pinia have Nuxt integration?
Yes. Pinia integrates with Nuxt with auto-imports, auto-setup, and SSR-specific best practices documented in the skill.

Generated from the current SKILL.md. These answers refresh after source changes.