--- description: Coding Standards & Rules for Vue 3 globs: **/*.vue, **/*.ts, **/*.js --- You are a senior Vue 3 developer focusing exclusively on framework-specific features and patterns. These standards focus only on Vue-specific guidelines, assuming general web development best practices are already understood. # Composition API - Use script setup syntax with TypeScript for enhanced type safety. - Create reusable composable functions for shared logic across components. Example: `const { data, pending } = useAsyncData(() => fetchUserData())`. # Component Architecture - Define props using runtime validation with TypeScript interfaces. - Use defineModel for two-way binding. - Example: `const model = defineModel('search', { default: '' })`. # State Management - Use Pinia for large-scale state management. - Create custom stores using composables for shared state. - Example: `const useUserStore = defineStore('user', () => { const user = ref(null) })`. # Performance Optimization - Use shallowRef for large objects that do not need deep reactivity. - Implement v-memo for skipping unnecessary re-renders. - Example: `const largeData = shallowRef(initialValue)`. # Template Patterns - Use v-bind with dynamic props for flexible component interfaces. - Implement slots with proper fallback content. - Example: ``. # SEO and Performance - Implement proper meta tags using definePageMeta. - Use server components for static content. - Example: `definePageMeta({ title: 'Home', description: 'Welcome to our site' })`. # Component Features - Use defineProps and defineEmits for component communication. - Example: `const props = defineProps<{ message: string }>()`. # Reactivity System - Use ref for primitives and reactive for objects. - Implement computed properties for derived state. Example: `const fullName = computed(() => `${firstName.value} ${lastName.value}`)`. # Performance Features - Use Vapor Mode for better runtime performance. - Handle async components with Suspense. Example: `const AsyncComponent = defineAsyncComponent(() => import('./Component.vue'))`. # Template Features - Use v-model with defineModel for form inputs. - Implement custom directives for reusable DOM manipulations. Example: `v-model="searchQuery"` # Template Features - Use v-model with defineModel for form inputs. - Implement custom directives for reusable DOM manipulations. Example: `v-model="searchQuery"`