vue3 composition api
via PatrickJS/awesome-cursorrules
Vue 3 Composition API best practices and project structure guidance.
What is vue3 composition api?
This rule provides best practices for Vue 3 development using the Composition API, including setup functions, reactive state management, and lifecycle hooks. Use it when building Vue 3 applications to ensure consistent patterns for component logic, state management, and project organization.
- Guide setup() function usage for component logic organization
- Manage reactive state with ref() and reactive()
- Define computed properties and side effects with computed(), watch(), and watchEffect()
- Implement lifecycle hooks (onMounted, onUpdated, etc.)
- Use provide/inject for dependency injection patterns
- Structure projects with recommended folder organization (components, composables, views, router, store)
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// Vue 3 Composition API .cursorrules
// Vue 3 Composition API best practices
const vue3CompositionApiBestPractices = [ "Use setup() function for component logic", "Utilize ref and reactive for reactive state", "Implement computed properties with computed()", "Use watch and watchEffect for side effects", "Implement lifecycle hooks with onMounted, onUpdated, etc.", "Utilize provide/inject for dependency injection", ];
// Folder structure
const folderStructure = src/ components/ composables/ views/ router/ store/ assets/ App.vue main.js;
// Additional instructions
const additionalInstructions = `
- Use TypeScript for type safety
- Implement proper props and emits definitions
- Utilize Vue 3's Teleport component when needed
- Use Suspense for async components
- Implement proper error handling
- Follow Vue 3 style guide and naming conventions
- Use Vite for fast development and building `;
Related rules
Expert guidance for Svelte 5 and SvelteKit development with performance optimization focus.
WebAssembly Z80 cellular automata with environmental region grid control system.
Complete WordPress development setup with PHP, Gutenberg, WooCommerce, ACF, and security best practices.
WordPress development with PHP, Guzzle HTTP client, and Gutenberg block integration.
Cursor rules for Xian smart contract development in native Python.
Convert test scripts and requirements into Xray-formatted test cases for Jira integration.