vue-patterns
Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns. Activates for Vue, Nuxt, Vite, or Pinia projects. Use when building or reviewing Vue 3, Nuxt, or Pinia code — Composition API, reactivity, or router navigation.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/vue-patterns/SKILL.md
- License
- MIT
- Jobs
- Review
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Vue.js Patterns and Best Practices Comprehensive guide for Vue.js 3 development using Composition API (`<script setup>`), covering component design, reactivity, state management, routing, testing, and SSR patterns. Nuxt-specific guidance is included where it differs from vanilla Vue. ## When to Activate Activate this skill when: - The project uses Vue.js (any version), Nuxt, Vite + Vue, or Pinia. - The user asks about Vue component architecture, composables, reactivity, or state management. - Reviewing Vue Single-File Components (`.vue` files). - Setting up Vue Router, Pinia stores, or Vite/Vitest configuration. - Discussing Vue-specific performance, security, or SSR patterns. --- ## 1. Project Structure ### Recommended Layout (Feature-First) ``` src/ ├── api/ # API client and endpoint definitions ├── assets/ # Static assets (images, fonts, icons) ├── components/ # Shared/reusable components │ ├── base/ # Base UI primitives (Button, Input, Modal) │ └── features/ # Feature-specific shared components ├── composables/ # Reusable Composition API logic ├── layouts/ # Page layouts (optional) …