vue-pinia-best-practices Skill: Pinia Gotchas for Vue 3

Gives your agent six Pinia fixes and rules for Vue 3, so it stops writing stores that lose reactivity or crash at startup.

Installs: 17.5K; on skills.sh
Stars: 3.2K; on GitHub
Files: 6; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill is a short index that points the agent to six reference notes on Pinia. Each note names a symptom, explains the cause and shows wrong and right code. Topics are the "no active Pinia" error, returning all state from setup stores, using storeToRefs when destructuring, parentheses on store methods in templates, keeping filters in the URL, and using Pinia for large apps.

The skill bundles no scripts. The description is just "Pinia stores, state management patterns, store setup, and reactivity with stores", so the repo README suggests starting a prompt with "use vue skill" to trigger it reliably. The README also calls the repo an early experiment whose content may be incomplete.

Good for

Vue 3 developers using Pinia who want the agent to avoid common store bugs
Anyone debugging the "getActivePinia() was called" error or a UI that stops updating
Teams standardising on Pinia and DevTools for larger apps

Install vue-pinia-best-practices

Claude Code

Copy this prompt.

Install the vue-pinia-best-practices skill in Claude Code. Run this command:

npx skills add https://github.com/vuejs-ai/skills --skill vue-pinia-best-practices

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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

Sections in SKILL.md

Store Setup
Reactivity
State Patterns

Key facts

Author: github.com/vuejs-ai (from the SKILL.md header)
Repo: vuejs-ai/skills
License: MIT (as listed by the crawl)
Installs on skills.sh: 17,493 (Nov 2, 2026)
GitHub stars: 3,229 (repo, Nov 2, 2026)
Last commit: 2026-10-23
Files: 7 files including SKILL.md: 6 reference notes and no scripts
License (SKILL.md header): MIT
Status: README calls the repo an early experiment and community project
Trigger tip: Start prompts with "use vue skill"

What it includes

Fixes "getActivePinia() was called but there was no active Pinia"
Marked HIGH impact. Install Pinia with app.use(pinia) before mounting, and never call a store at module top level.
pinia-no-active-pinia-error
Return every state property from a setup store so SSR and DevTools keep working
Marked HIGH impact. For private state, use a prefix such as _internal instead of leaving it out of the return.
pinia-setup-store-return-all-state
Use storeToRefs() to destructure state and getters; destructure actions directly
Marked HIGH impact. Plain destructuring gives non-reactive values, so the UI goes stale.
pinia-store-destructuring-breaks-reactivity
Call store methods with parentheses in templates to keep the right this
Marked MEDIUM impact. Mostly an issue with hand-rolled reactive stores; Pinia handles this for you, per the note.
store-method-binding-parentheses
Keep filters, search, sort and pagination in URL query parameters
Marked MEDIUM impact. State in the URL survives refresh and can be shared as a link.
state-url-for-ephemeral-filters
Choose Pinia over hand-rolled reactive stores for shared state and team work
Marked MEDIUM impact. Hand-rolled state is fine for prototypes and very small apps, and the note suggests moving from Vuex to Pinia.
state-use-pinia-for-large-apps

From the official docs

Questions

What does the vue-pinia-best-practices skill do?

It loads six short Pinia guides into the assistant's context when you work on stores. They cover startup errors, setup stores, reactivity, template method calls, URL state and when to use Pinia.

How do I install it?

Use the install box above for this skill alone. The README installs every Vue skill with npx skills add vuejs-ai/skills and also lists a Claude Code marketplace route.

How do I make sure it triggers?

Start your prompt with "use vue skill". The README says that without it, triggering can be inconsistent because it depends on how well your prompt matches the skill's description.

Does it need the other Vue skills?

SKILL.md does not require them. The repo also has vue-best-practices, vue-router-best-practices and others that you can add for general Vue 3 or routing advice.

Do I need an API key or any scripts?

No key is mentioned and the skill bundles no scripts, only SKILL.md and six reference notes.

Why does my UI stop updating when I destructure a store?

Pinia stores are wrapped with reactive, so destructuring state or getters gives plain values. Use storeToRefs() for state and getters, and destructure actions directly.

Is it reliable?

The README calls the repo an early experiment and warns the skills may be incomplete because of hallucinations. Check generated code against the Pinia docs.

Is it safe?

It is a set of Markdown notes and bundles no scripts. Our advice: review the code the assistant writes, as you would any other.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/vue-pinia-best-practices

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 10

vue-pinia-best-practices SKILL.md · github.com
vuejs-ai/skills README · github.com
skills.sh listing · skills.sh
vuejs-ai/skills · github.com
pinia-no-active-pinia-error.md · github.com
pinia-setup-store-return-all-state.md · github.com
pinia-store-destructuring-breaks-reactivity.md · github.com
store-method-binding-parentheses.md · github.com
state-url-for-ephemeral-filters.md · github.com
state-use-pinia-for-large-apps.md · github.com