2 changed files with 90 additions and 0 deletions
@ -0,0 +1,86 @@ |
|||
--- |
|||
description: Vue.js best practices and patterns for modern web applications |
|||
globs: **/*.vue, **/*.ts, components/**/* |
|||
--- |
|||
|
|||
# Vue.js Best Practices |
|||
|
|||
## Component Structure |
|||
- Use Composition API over Options API |
|||
- Keep components small and focused |
|||
- Use proper TypeScript integration |
|||
- Implement proper props validation |
|||
- Use proper emit declarations |
|||
- Keep template logic minimal |
|||
|
|||
## Composition API |
|||
- Use proper ref and reactive |
|||
- Implement proper lifecycle hooks |
|||
- Use composables for reusable logic |
|||
- Keep setup function clean |
|||
- Use proper computed properties |
|||
- Implement proper watchers |
|||
|
|||
## State Management |
|||
- Use Pinia for state management |
|||
- Keep stores modular |
|||
- Use proper state composition |
|||
- Implement proper actions |
|||
- Use proper getters |
|||
- Handle async state properly |
|||
|
|||
## Performance |
|||
- Use proper component lazy loading |
|||
- Implement proper caching |
|||
- Use proper computed properties |
|||
- Avoid unnecessary watchers |
|||
- Use proper v-show vs v-if |
|||
- Implement proper key management |
|||
|
|||
## Routing |
|||
- Use Vue Router properly |
|||
- Implement proper navigation guards |
|||
- Use proper route meta fields |
|||
- Handle route params properly |
|||
- Implement proper lazy loading |
|||
- Use proper navigation methods |
|||
|
|||
## Forms |
|||
- Use v-model properly |
|||
- Implement proper validation |
|||
- Handle form submission properly |
|||
- Show proper loading states |
|||
- Use proper error handling |
|||
- Implement proper form reset |
|||
|
|||
## TypeScript Integration |
|||
- Use proper component type definitions |
|||
- Implement proper prop types |
|||
- Use proper emit declarations |
|||
- Handle proper type inference |
|||
- Use proper composable types |
|||
- Implement proper store types |
|||
|
|||
## Testing |
|||
- Write proper unit tests |
|||
- Implement proper component tests |
|||
- Use Vue Test Utils properly |
|||
- Test composables properly |
|||
- Implement proper mocking |
|||
- Test async operations |
|||
|
|||
## Best Practices |
|||
- Follow Vue style guide |
|||
- Use proper naming conventions |
|||
- Keep components organized |
|||
- Implement proper error handling |
|||
- Use proper event handling |
|||
- Document complex logic |
|||
|
|||
## Build and Tooling |
|||
- Use Vite for development |
|||
- Configure proper build setup |
|||
- Use proper environment variables |
|||
- Implement proper code splitting |
|||
- Use proper asset handling |
|||
- Configure proper optimization |
Loading…
Reference in new issue