You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
---
|
|
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
|