---
title: "Vue.js Development Patterns"
description: "Vue.js component architecture, state management with Pinia, Composition API patterns, and performance optimization. Covers TypeScript integration, Vite builds, and testing with Vitest."
type: context
domain: development
tags: [vuejs, javascript, pinia, composition-api, vite, typescript]
---

# Vue.js Patterns

## Component Architecture
- Single File Components (SFC) structure
- Composition API for complex logic
- Props down, events up communication
- Provide/inject for deep hierarchies

## State Management
- **Pinia** for application state
- **Local state** for component-specific data
- **Computed properties** for derived state
- **Watchers** for side effects

## Performance Optimization
- Lazy loading with dynamic imports
- Virtual scrolling for large lists
- Proper key usage in v-for
- Component-level code splitting

## Development Patterns
- TypeScript integration
- Testing with Vitest/Jest
- Build optimization with Vite
- Progressive Web App features

## Related Documentation
- Examples: `/examples/vuejs/component-patterns.md`
- Examples: `/examples/vuejs/state-management.md`
- Examples: `/examples/vuejs/performance-optimization.md`
- Reference: `/reference/vuejs/debugging.md`
- Reference: `/reference/vuejs/best-practices.md`