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 ro

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. vs Mixins Composables replace Vue 2 mixins entirely: Mixins : Opaque data flow, source of truth collisions, name conflicts. Composables : Explicit imports, clear return values, composable and tree shakable. 4. State Management When to Use What Pattern Use Case ref() / reactive() Local component state Props + Emits Parent child communication Provide / Inject Theme, config, plugin API Pinia store Global, shared, complex state Server state composable API data with caching (wrap fetch /TanStack Query) Pinia Setup Store (Preferred) Use Setup Store syntax (not Options Store). Prefer actions for business level mutations and $patch() for grouped updates. Every async action: handle loading + success + error. 5. Vue Router Route Definitions Navigation Guards Reactive Route Params When a component stays mounted but route params change: 6. Template Patterns Template Syntax 7. Performance Technique When to Use v memo List items that rarely change v once Content rendered once and static forever shallowRef() Large data structures replaced wholesale shallowReactive() Only top level properties are reactive v show over v if Frequent visibility toggles <KeepAlive :max="10" Cache toggled views Lazy routes () = import(...) for non critical routes Suspense Async component loading with fallback 8. Testing Stack Vitest for unit and component tests Vue Test Utils for mounting and interaction @pinia/testing for store mocking Playwright for E2E Component Test Pattern 9. Nuxt Specific Patterns Auto Imports Nuxt auto imports ref , computed , watch , useFetch , useAsyncData , etc. Use them directly without importing. For non Nuxt projects, always import explicitly. useAsyncData / useFetch Server Routes Runtime Config 10. Vue 3.5+ New APIs Reactive Props Destructure Vue 3.5 stabilized reactive props destructure — destructured variables from defineProps() are automatically reactive: useTemplateRef() Replace name matched plain refs with useTemplateRef() for template references: Supports dynamic ref IDs: useTemplateRef(dynamicRefId) . onWatcherCleanup() Globally importable watcher cleanup API (Vue 3.5+). It must be called synchronously inside the watcher callback: useId() SSR stable unique ID generation for form elements and accessibility: defer Teleport <Teleport defer allows teleporting to targets rendered in the same cycle: Lazy Hydration (SSR) defineAsyncComponent() now supports hydrate strategy: Anti Patterns Anti Pattern Why It's Wrong The Fix Destructuring defineProps() (Vue < 3.5) Captures snapshot, loses reactivity Access via props.xxx or use toRefs() watch() on destructured prop (Vue 3.5+) Compile time error — destructured props can't be watched directly Use getter wrapper: watch(() = count, ...) v if + v for on same element Ambiguous execution order Use computed filtered array v for key = index Broken state on reorder Use stable database IDs Mutating props Violates one way data flow Emit events or use v model v html with user content XSS vulnerability Sanitize with DOMPurify Mixins in Vue 3 Opaque, collision prone Replace with composables Module scope side effects in composable Shared across instances Scope in onMounted + onUnmounted reactive() for replaceable state Replacement breaks reactivity Use ref() instead Watcher without cleanup Memory leaks, race conditions Use onCleanup or onWatcherCleanup() (Vue 3.5+) Options API in new Vue 3 code Ecosystem move to Composition API Use <script setup Plain ref for template references No dynamic ref support, name matching fragile Use useTemplateRef() (Vue 3.5+) Related Skills accessibility — ARIA, semantic HTML, focus management frontend patterns — Cross framework frontend architecture typescript — TypeScript best practices applied to Vue projects coding standards — General code quality standards

vue-patterns