Agent skill · software engineering · affaan-m
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.
Why this skill is useful
Provides specific patterns and best practices for Vue.js 3 development that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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) File Naming Convention When to Use ----------- ------------- PascalCase.vue All components (enforced by vue/multi-word-component-names) useCamelCase.ts Composables camelCase.ts Utilities, API clients, types kebab-case directories Route segments, feature folders --- 2. Component Architecture Single-File Component Order Presentational vs Container Container components: Own data fetching, state, and side effects. Render presentational components. Presentational components: Receive props, emit events. No API calls, no store access. Pure rendering. Props Best Practices Always provide type, and required/default where appropriate. Boolean props: isXxx, hasXxx, canXxx. Never mutate props — emit events instead. For v-model binding, use defineModel() (Vue 3.4+) or modelValue + update:modelValue. Events Use kebab-case in templates (@update:model-value). Use camelCase in script (emit("update:modelValue", val)). --- 3. Composables (Reusable Logic) Structure Rules Must start with use prefix. Return reactive values (ref, computed, reactive), never plain primitives. Accept reactive inputs via MaybeRef / toRef() / toValue(). Clean up side effects in onUnmounted or watcher onCleanup. No module-scope side effects. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/vue-patterns