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/features-composables.md

name: composables-in-stores description: Using Vue composables within Pinia stores

Composables in Stores

Pinia stores can leverage Vue composables for reusable stateful logic.

Option Stores

Call composables inside the state property, but only those returning writable refs:

import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }),
})

Works: Composables returning ref():

  • useLocalStorage

  • useAsyncState

Doesn't work in Option Stores:

  • Composables exposing functions

  • Composables exposing readonly data

Setup Stores

More flexible - can use almost any composable:

import { defineStore } from 'pinia'
import { useMediaControls } from '@vueuse/core'
import { ref } from 'vue'

export const useVideoPlayer = defineStore('video', () => {
  const videoElement = ref<HTMLVideoElement>()
  const src = ref('/data/video.mp4')
  const { playing, volume, currentTime, togglePictureInPicture } =
    useMediaControls(videoElement, { src })

  function loadVideo(element: HTMLVideoElement, newSrc: string) {
    videoElement.value = element
    src.value = newSrc
  }

  return {
    src,
    playing,
    volume,
    currentTime,
    loadVideo,
    togglePictureInPicture,
  }
})

Note: Don't return non-serializable DOM refs like videoElement - they're internal implementation details.

SSR Considerations

Option Stores with hydrate()

Define a hydrate() function to handle client-side hydration:

import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }),

  hydrate(state, initialState) {
    // Ignore server state, read from browser
    state.user = useLocalStorage('pinia/auth/login', 'bob')
  },
})
Setup Stores with skipHydrate()

Mark state that shouldn't hydrate from server:

import { defineStore, skipHydrate } from 'pinia'
import { useEyeDropper, useLocalStorage } from '@vueuse/core'

export const useColorStore = defineStore('colors', () => {
  const { isSupported, open, sRGBHex } = useEyeDropper()
  const lastColor = useLocalStorage('lastColor', sRGBHex)

  return {
    // Skip hydration for client-only state
    lastColor: skipHydrate(lastColor),
    open,       // Function - no hydration needed
    isSupported, // Boolean - not reactive
  }
})

skipHydrate() only applies to state properties (refs), not functions or non-reactive values.

<!-- Source references: - https://pinia.vuejs.org/cookbook/composables.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