vue-layer-store

Generate Pinia-based auth and user stores for Vue 3 projects.

Updated Mar 16, 2026
One-click install
npx skills add https://github.com/limkyulee/front-skills --skill vue-layer-store
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-layer-store
Source: https://github.com/limkyulee/front-skills/tree/main/.opencode/vue-framework/vue-layer-store
Command: npx skills add https://github.com/limkyulee/front-skills --skill vue-layer-store

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue3 프로젝트의 상태 관리를 중앙 집중식으로 처리하기 위해 Pinia 기반의 전역 스토어 레이어(auth.store.ts 와 user.store.ts)를 자동으로 생성합니다.

Core Features & Use Cases

  • Pinia 기반 인증 상태(auth.store.ts) 및 사용자 프로필(user.store.ts) 관리 파일 생성을 자동화합니다.
  • 기존 Vue3 프로젝트에 전역 상태 관리 레이어를 단독으로 추가하거나, 오케스트레이터의 네 번째 단계로 통합할 수 있습니다.
  • CONFIG.pinia 설정에 따라 레이어 생성 여부를 제어하고, API 클라이언트 연동과 설계 원칙을 반영합니다.

Quick Start

Instantiate the Vue store layer in your Vue 3 project and run the app to verify authentication and profile management.

Frequently Asked Questions about vue-layer-store

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

FAQPage Schema
How do I set up Pinia auth and user stores in a Vue 3 project?

You can set up Pinia auth and user stores by generating src/stores/auth.store.ts and src/stores/user.store.ts files that manage centralized authentication and user profile state. This process wires the stores directly to your existing API client and applies design principles like action-only state changes and a $reset method.

What is the best way to manage centralized authentication state in Vue 3?

The best way to manage centralized authentication state in Vue 3 is by creating a dedicated Pinia auth store. This approach isolates authentication logic and user profile management into a global state layer, ensuring state changes occur only through defined actions with optional reset capabilities.

Do I need to configure anything before adding a Pinia store layer to my Vue app?

You need an existing Vue 3 project and an API client ready for wiring. The store layer generation is controlled by a CONFIG.pinia setting, which you must configure to determine whether the authentication and user profile stores should be activated and integrated into your application.

Can I integrate a Pinia user store into an existing Vue application?

Yes, you can integrate a Pinia user store into an existing Vue application. It can be added as a standalone global state management layer or integrated as the fourth stage of an orchestrator workflow, automatically connecting to your API client for profile management.

What design principles does an automated Pinia store layer follow for state management?

An automated Pinia store layer follows explicit design principles including action-only state changes and a $reset method for clearing store data. These principles ensure centralized state mutations remain predictable and manageable within your Vue 3 authentication and profile workflows.