AutoGineer
Generated banner for Pinia
Generated logo for Pinia

Pinia

Anthony FuCommunityCreated by Anthony Fu

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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.
— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Pinia is the official state management library for Vue, offering an intuitive API for managing application state. It supports both Options and Composition API styles, provides first-class TypeScript support, and includes built-in devtools integration. The library facilitates store creation, state management, and complex logic handling through actions and getters, with specific support for server-side rendering and Nuxt integration.

What it does

  • Defines stores using Options or Composition API patterns
  • Provides reactive state management with getters and actions
  • Supports store-to-store communication and composable integration
  • Enables store extensibility through custom plugins
  • Facilitates server-side rendering and state hydration
  • Supports hot module replacement for development workflows

When to use it

  • When implementing centralized state management in Vue applications
  • When requiring type-safe store definitions in TypeScript projects
  • When building Nuxt applications needing integrated state handling
  • When needing to preserve state during development via HMR
  • When testing components that rely on shared store state

Advantages

  • First-class TypeScript support for type-safe stores
  • Seamless integration with Nuxt and server-side rendering
  • Flexible store definition styles for different architectural needs
  • Built-in support for devtools and hot module replacement
  • Extensible architecture via plugin system

Usage examples

“How do I define a basic store in Pinia?”
You use the defineStore function to create a store, providing a unique ID and either an object for Options API or a function for Composition API.
“How can I preserve state during development?”
You can implement Hot Module Replacement (HMR) by using the acceptHMRUpdate function within your store definition file.
“How do I use a store inside a Nuxt middleware?”
You access the store by passing the pinia instance from useNuxtApp to your store function, ensuring it is available in the middleware context.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/antfu/pinia/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip pinia.zip -d .agents/skills

Documentation by Anthony Fu

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

TopicDescriptionReference
StoresDefining stores, state, getters, actions, storeToRefs, subscriptionscore-stores

Features

Extensibility
TopicDescriptionReference
PluginsExtend stores with custom properties, state, and behaviorfeatures-plugins
Composability
TopicDescriptionReference
ComposablesUsing Vue composables within stores (VueUse, etc.)features-composables
Composing StoresStore-to-store communication, avoiding circular dependenciesfeatures-composing-stores

Best Practices

TopicDescriptionReference
TestingUnit testing with @pinia/testing, mocking, stubbingbest-practices-testing
Outside ComponentsUsing stores in navigation guards, plugins, middlewaresbest-practices-outside-component

Advanced

TopicDescriptionReference
SSRServer-side rendering, state hydrationadvanced-ssr
NuxtNuxt integration, auto-imports, SSR best practicesadvanced-nuxt
HMRHot module replacement for developmentadvanced-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

Files

references/best-practices-outside-component.md

name: using-stores-outside-components description: Correctly using stores in navigation guards, plugins, and other non-component contexts

Using Stores Outside Components

Stores need the pinia instance, which is automatically injected in components. Outside components, you may need to provide it manually.

Single Page Applications

Call stores after pinia is installed:

import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

// ❌ Fails - pinia not created yet
const userStore = useUserStore()

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// ✅ Works - pinia is active
const userStore = useUserStore()

Navigation Guards

Wrong: Call at module level

import { createRouter } from 'vue-router'
const router = createRouter({ /* ... */ })

// ❌ May fail depending on import order
const store = useUserStore()

router.beforeEach((to) => {
  if (store.isLoggedIn) { /* ... */ }
})

Correct: Call inside the guard

router.beforeEach((to) => {
  // ✅ Called after pinia is installed
  const store = useUserStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) {
    return '/login'
  }
})

SSR Applications

Always pass the pinia instance to useStore():

const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)

router.beforeEach((to) => {
  // ✅ Pass pinia instance
  const main = useMainStore(pinia)

  if (to.meta.requiresAuth && !main.isLoggedIn) {
    return '/login'
  }
})

serverPrefetch()

Access pinia via this.$pinia:

export default {
  serverPrefetch() {
    const store = useStore(this.$pinia)
    return store.fetchData()
  },
}

onServerPrefetch()

Works normally in <script setup>:

<script setup>
const store = useStore()

onServerPrefetch(async () => {
  // ✅ Just works
  await store.fetchData()
})
</script>

Key Takeaway

Defer useStore() calls to functions that run after pinia is installed, rather than calling at module scope.

<!-- Source references: - https://pinia.vuejs.org/core-concepts/outside-component-usage.html -->

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Anthony Fu
Publisher
Anthony Fu (Community)
Source
antfu/skills · skills/pinia · commit f63e9ec
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download pinia.zip