vue-patterns

Topics in the source

• Vue.js Patterns and Best Practices
• When to Activate
• 1. Project Structure
• Recommended Layout (Feature-First)
• File Naming
• 2. Component Architecture
• Single-File Component Order
• Presentational vs Container

Comprehensive guide for Vue.js 3 development using Composition API ( ), covering component design, reactivity, state management, routing, testing, and SSR patterns. Nuxt-specific guidance is included where it differs from vanilla Vue. 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. -- | 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 | -- 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. Always provide type, and required/default where appropriate. Boolean props: isXxx, hasXxx, canXxx. Never m

This is an excerpt. Refer to the complete source and its current requirements.