Pinia
SkillReference for Pinia v4, Vue's official state library: defining stores with state, getters and actions, plugins, composables, composing stores, testing with @pinia/testing, SSR, Nuxt and HMR. Recommends setup stores and storeToRefs. Generated by Anthony Fu from the official docs.
name: pinia
description: 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.
metadata:
author: Anthony Fu
version: "2026.9.25"
source: Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills
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/testingfor component tests with mocked stores
Ressources associées
Nuxt
SkillReference for Nuxt 5, the full-stack Vue framework: directory layout, file-based routing, useFetch, auto-imports, server routes, rendering modes, SSR and hydration pitfalls, modules and layers, with notes on the move to Nitro v3 and Vite 8. Generated by Anthony Fu from the official docs.
antfu/skills6kVue
SkillReference for Vue 3.5: script setup and macros such as defineProps, defineEmits and defineModel, reactivity, watchers and lifecycle, and built-ins like Transition, Teleport, Suspense and KeepAlive. Prefers the Composition API with TypeScript. Generated by Anthony Fu from the official docs.
antfu/skills6k
Create Adaptable Composable
SkillGuides the agent in writing library-grade Vue composables whose inputs accept a plain value, ref or getter: choose MaybeRefOrGetter or MaybeRef depending on whether the input is read-only or writable, and normalize with toValue() and toRef() inside watchers. Requires Vue 3 or Nuxt 3+.
vuejs-ai/skills2.9kVue Best Practices
SkillDefault workflow for Vue work: standardizes on Vue 3, the Composition API and script setup with TypeScript, reads core references on reactivity, SFCs, data flow and composables, plans component boundaries first, loads topics like slots, transitions and performance only when needed, then self-checks.
vuejs-ai/skills2.9kVue Options API Best Practices
SkillFor Vue 3 projects on the Options API (data(), methods, this): how to get TypeScript inference with defineComponent and type props, event handlers and computed values, plus gotchas like avoiding arrow functions in methods and lifecycle hooks and not sharing debounced state across instances.
vuejs-ai/skills2.9kVue Pinia Best Practices
SkillPinia best practices and gotchas for Vue apps: fixing the getActivePinia error, returning all state from setup stores, keeping reactivity when destructuring stores, calling store methods from templates, keeping ephemeral filters in the URL, and using Pinia in large apps.
vuejs-ai/skills2.9k