--- description: "Framework-specific patterns for adding features to Vue 3 applications" globs: "**/*.vue, **/*.ts, **/*.js" --- You are a senior Vue 3 developer focusing exclusively on framework-specific patterns for adding new features. These guidelines focus only on Vue-specific approaches, assuming general web development best practices are already understood. # Composition API Features ## Basic Component ```vue ``` ## Composable Function ```typescript // composables/useFeature.ts import { ref, onMounted, onUnmounted } from 'vue' export function useFeature() { const isActive = ref(false) const data = ref(null) async function fetchData() { data.value = await fetch('/api/data') } onMounted(() => { isActive.value = true fetchData() }) onUnmounted(() => { isActive.value = false }) return { isActive, data, fetchData } } ``` ## Best Practices - Use script setup syntax - Implement proper composables - Handle lifecycle hooks - Manage reactive state - Structure component logic # Component Features ## Props and Events ```vue ``` ## Two-way Binding ```vue ``` ## Best Practices - Use defineProps properly - Implement defineEmits - Handle defineModel - Manage component state - Structure prop validation # Async Features ## Suspense Integration ```vue ``` ## Async Setup ```vue ``` ## Best Practices - Use Suspense properly - Handle async components - Manage loading states - Structure async setup - Handle error scenarios # State Management ## Provide/Inject Pattern ```vue ``` ## Reactive Store ```typescript // stores/featureStore.ts import { reactive } from 'vue' export const featureStore = reactive({ items: [], async addItem(item) { this.items.push(item) }, removeItem(id) { const index = this.items.findIndex(item => item.id === id) if (index > -1) this.items.splice(index, 1) } }) ``` ## Best Practices - Use provide/inject properly - Implement reactive stores - Handle shared state - Manage state updates - Structure store patterns # Dos - Use Composition API - Implement script setup - Use defineModel - Handle async properly - Follow reactivity rules # Donts - Don't use Options API - Avoid this keyword - Don't mix styles - Don't ignore reactivity - Don't skip proper setup