Vue.js

1---
2description: Vue.js best practices and patterns for modern web applications
3globs: **/*.vue, **/*.ts, components/**/*
4---
5 
6# Vue.js Best Practices
7 
8## Component Structure
9- Use Composition API over Options API
10- Keep components small and focused
11- Use proper TypeScript integration
12- Implement proper props validation
13- Use proper emit declarations
14- Keep template logic minimal
15 
16## Composition API
17- Use proper ref and reactive
18- Implement proper lifecycle hooks
19- Use composables for reusable logic
20- Keep setup function clean
21- Use proper computed properties
22- Implement proper watchers
23 
24## State Management
25- Use Pinia for state management
26- Keep stores modular
27- Use proper state composition
28- Implement proper actions
29- Use proper getters
30- Handle async state properly
31 
32## Performance
33- Use proper component lazy loading
34- Implement proper caching
35- Use proper computed properties
36- Avoid unnecessary watchers
37- Use proper v-show vs v-if
38- Implement proper key management
39 
40## Routing
41- Use Vue Router properly
42- Implement proper navigation guards
43- Use proper route meta fields
44- Handle route params properly
45- Implement proper lazy loading
46- Use proper navigation methods
47 
48## Forms
49- Use v-model properly
50- Implement proper validation
51- Handle form submission properly
52- Show proper loading states
53- Use proper error handling
54- Implement proper form reset
55 
56## TypeScript Integration
57- Use proper component type definitions
58- Implement proper prop types
59- Use proper emit declarations
60- Handle proper type inference
61- Use proper composable types
62- Implement proper store types
63 
64## Testing
65- Write proper unit tests
66- Implement proper component tests
67- Use Vue Test Utils properly
68- Test composables properly
69- Implement proper mocking
70- Test async operations
71 
72## Best Practices
73- Follow Vue style guide
74- Use proper naming conventions
75- Keep components organized
76- Implement proper error handling
77- Use proper event handling
78- Document complex logic
79 
80## Build and Tooling
81- Use Vite for development
82- Configure proper build setup
83- Use proper environment variables
84- Implement proper code splitting
85- Use proper asset handling
86- Configure proper optimization