Skip to content
Frontend
Skill

/vue-pinia-best-practices

Pinia stores, state management patterns, store setup, and reactivity with stores.

From plugin
skills
3.2k8 skills

Claude Code

$ npx -y skills add vuejs-ai/skills --skill vue-pinia-best-practices --agent claude-code

SKILL.md

vue-pinia-best-practices.SKILL.md
name: vue-pinia-best-practices
description: "Pinia stores, state management patterns, store setup, and reactivity with stores."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai

Pinia best practices, common gotchas, and state management patterns.

Store Setup

  • Getting "getActivePinia was called" error at startup → See [pinia-no-active-pinia-error](reference/pinia-no-active-pinia-error.md)
  • Setup stores missing state in DevTools or SSR → See [pinia-setup-store-return-all-state](reference/pinia-setup-store-return-all-state.md)

Reactivity

  • Store destructuring stops updating UI reactively → See [pinia-store-destructuring-breaks-reactivity](reference/pinia-store-destructuring-breaks-reactivity.md)
  • Store methods lose context in template calls → See [store-method-binding-parentheses](reference/store-method-binding-parentheses.md)

State Patterns

  • Filters reset on refresh or can't be shared → See [state-url-for-ephemeral-filters](reference/state-url-for-ephemeral-filters.md)
  • Building production app without DevTools or conventions → See [state-use-pinia-for-large-apps](reference/state-use-pinia-for-large-apps.md)
@vuejs-ai
Ships withskills

Agent skills for Vue 3 development. 🚧 Early Experiment / Community Project This repository is an early experiment in creating specialized skills for AI agents to enhance Vue 3 development.

Stars on GitHub

Momentum

stars in total
3.2k
Star history of vuejs-ai/skills on GitHub, a chart by star-history.com

Other skills on skills.

vue-best-practices

vue-best-practices

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach.…

@vuejs-ai@vuejs-aiInstall Skill
vue-debug-guides

vue-debug-guides

Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or…

@vuejs-ai@vuejs-aiInstall Skill

More skills from other plugins.

next-bundle-optimizer
Auto-invoked

next-bundle-optimizer

Audit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser…

nextjs2d143k
@vercel@vercelInstall Skill
migrate-radix-to-base

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…

ui11d127k
@shadcn-ui@shadcn-uiInstall Skill
chrome-release-cls

chrome-release-cls

Given a Chrome Releases blog post URL (chromereleases.googleblog.com), extract every CVE/bug and find the underlying Gerrit CL…

electron2d124k
@electron@electronInstall Skill
taste-skill
Auto-invoked

taste-skill

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…

@leonxlnx@leonxlnxInstall Skill

Questions about vue-pinia-best-practices.

Which coding agents can use vue-pinia-best-practices?
vue-pinia-best-practices installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.