Home / Cursor rules / Vue
Vue
Vue.js best practices and patterns for modern web applications
Cursor rules (.mdc)Public domain (CC0)
–unranked
Install
mkdir -p .cursor/rules && curl -sL https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/b044f956f021b6e8877f16781bcfc466a6a120e9/rules/vue.mdc -o .cursor/rules/vue.mdcDownloads the file at commit b044f956f021 into .cursor/rules/.
To remove it later:
rm .cursor/rules/vue.mdcContext cost: ≈547 tokens when used.
Rules file
--- description: "Vue.js best practices and patterns for modern web applications" globs: **/*.vue, **/*.ts, components/**/* alwaysApply: false --- # 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
Security
Scanned Nov 4, 2026 at commit b044f956f021, with Cisco's open-source skill-scanner.
None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.
A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan