Sign in
Explore
Prompts · RulesWeb & UIReviewed

vue

Vue.js best practices: component structure and patterns for modern web applications.

Kind
Rules
Works with
Cursor
Languages
TypeScript / JavaScript
Source
Awesome Cursor Rules @ b044f956f021
Path
rules/vue.mdc
License
CC0-1.0
Jobs
Implementation
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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
…