vue3 composition api
via PatrickJS/awesome-cursorrules
Vue 3 Composition API best practices and project structure guidance
What is vue3 composition api?
Provides conventions and patterns for Vue 3 development using the Composition API. Use this rule when building Vue 3 applications to ensure consistent use of setup(), reactive state management, lifecycle hooks, and proper project organization.
- Use setup() function and reactive state with ref/reactive for component logic
- Implement computed properties, watchers, and lifecycle hooks (onMounted, onUpdated, etc.)
- Apply dependency injection via provide/inject and Teleport/Suspense components
- Define props and emits with proper TypeScript type safety
- Organize projects with standard folder structure (components, composables, views, router, store)
- Follow Vue 3 style guide conventions and use Vite for development
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
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.