skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

pinia

Installs, configures, and verifies Pinia state management in Nuxt and Vue SPA Vite projects.

Updated Jun 28, 2026
Search Tags:#state management#store#frontend#vue#vite#pinia#nuxt
One-click install
npx skills add https://github.com/jason23452/my-skill --skill pinia-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pinia
Source: https://github.com/jason23452/my-skill/tree/main/frontend/status/pinia
Command: npx skills add https://github.com/jason23452/my-skill --skill pinia-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pinia, @pinia/nuxt, and includes scripts (resource) components.

What problem does it solve? Setting up Pinia correctly differs between Nuxt and Vue SPA Vite projects, and mistakes like manual createPinia plugins in Nuxt, wrong store directory placement, or mismatched package managers cause SSR bugs and inconsistent project structure. This Skill detects the Vue target, installs the right packages, registers Pinia correctly, and verifies the result. ## Core Features & Use Cases - Target-aware setup: Detects Nuxt versus Vue SPA Vite projects and applies the correct integration, using @pinia/nuxt modules for Nuxt and createPinia() app registration for Vue Vite. - Lockfile-aware installation: Detects pnpm, npm, yarn, or bun from lockfiles and installs pinia and @pinia/nuxt with the project's existing package manager. - Store architecture guidance: Places stores in shared/store, features/<feature>/store, or src/store based on the repo's actual layout, with rules for storeToRefs, SSR-safe state, and persistence boundaries. - Use Case: After scaffolding a Nuxt 4 app, ask the AI to add Pinia; it installs pinia and @pinia/nuxt, registers the module in nuxt.config, creates the correct store directory, and runs verification. ## Quick Start Use the pinia skill to add and configure Pinia state management in my Nuxt or Vue Vite project.

Frequently Asked Questions about pinia

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Pinia to a Nuxt 4 project?▼

Install pinia and @pinia/nuxt, then add @pinia/nuxt to the modules array in nuxt.config. Do not create a manual createPinia plugin in Nuxt; the module owns SSR setup. Stores can live in app/store or feature-based directories.

How to set up Pinia in a Vue Vite SPA?▼

Install pinia, import createPinia in src/main.ts, and call app.use(createPinia()) before app.mount(). Store files go in src/store by default, or in src/shared/store and src/features/<feature>/store for feature-based layouts.

Pinia vs other state libraries for Vue projects?▼

Pinia is the official Vue state library, supporting setup-style stores, devtools, SSR, and plugins. This Skill covers only Pinia for Vue and Nuxt; it does not apply to React, Next.js, Svelte, or non-Vue state libraries.

Does Pinia work with Nuxt SSR and server-side rendering?▼

Yes, @pinia/nuxt handles SSR integration automatically. Keep store state serializable, avoid reading window or localStorage at module top level, and use callOnce or Nuxt data composables for page-level initial fetches.

Why is my Pinia store not reactive when destructuring?▼

Destructuring state or getters directly from a store breaks reactivity. Use storeToRefs() when destructuring state and getters in components; actions can be destructured directly without losing anything.

When should I not use Pinia for state?▼

Keep local UI state inside the component when it is not shared across components, routes, or features. Pinia is meant for state that crosses component, route, or feature boundaries, not for every piece of component-local data.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
3

vite-agents-project-scaffolder

Scaffold Vite projects with config, env, and directory templates.

Official
Advanced
maximoseomaximoseo

Development

Guides building Space Agent browser modules using layered architecture and extension/component/Alpine store patterns.

Community
Advanced
addisualemuaddisualemu

expo-testing

Set up Jest and React Native Testing Library for Expo component, hook, and store tests.

Community
Intermediate
omakeiomakei
2

nuxt-composables

Create reusable Nuxt 4 composables with Composition API state patterns.

Community
Advanced