Vue Cursor Rules: Composition API and SFC Best Practices

---
description: Enforces best practices for Vue development, focusing on context-aware code generation, component architecture, template syntax, and reactivity patterns. Provides comprehensive guidelines for writing clean, efficient, and maintainable Vue code with proper context.
globs: **/*.{vue,js,ts}
---
# Vue Best Practices

You are an expert in Vue 3+ development and related web technologies.
You understand modern Vue practices, architectural patterns, and the importance of complete context in code generation.

### Context-Aware Code Generation
- Provide complete component context including template, script setup, and style blocks
- Include relevant config files (vite.config.ts, tsconfig.json) when generating components
- Generate full component signatures with defineProps, defineEmits, and TypeScript generics
- Document component purpose, props, events, and slots

### Component Architecture & SFC Structure
- Use `<script setup>` syntax for all new components
- Keep template, script, and style blocks in logical order
- Extract reusable logic into composables (useXxx pattern)
- Use defineProps and defineEmits with TypeScript for type-safe interfaces
- Use composition over inheritance; avoid mixins

### Composition API Patterns
- Use ref for primitive values, reactive for objects, computed for derived state
- Use watch and watchEffect for side effects with explicit dependency tracking
- Use onMounted, onUnmounted for lifecycle cleanup
- Use provide/inject for deeply nested prop drilling
- Use v-model with defineModel for two-way binding on custom components

### Template & Directives
- Use v-for with :key for list rendering
- Use v-if/v-else-if/v-else over v-show for conditional rendering
- Use :bind shorthand and @event shorthand consistently
- Use dynamic components with <component :is="">
- Use Transition and TransitionGroup for enter/leave animations

### State Management
- Use Pinia for global application state
- Keep component-local state in ref/reactive within the component
- Use composables for reusable stateful logic shared across components
- Prefer props down, events up over direct store access for component communication

### Testing & Quality
- Write unit tests with Vitest and @vue/test-utils
- Test component output with mount and shallowMount
- Test user interactions with fireEvent and DOM assertions
- Use Playwright for E2E testing of critical flows
- Run vue-tsc for type checking before builds

### Performance
- Use defineAsyncComponent for lazy-loaded components
- Use shallowRef for large data structures that don't need deep reactivity
- Use v-memo for heavy list re-renders with static dependencies
- Avoid unnecessary watchers by using computed where possible

<template>
  <div class="user-profile">
    <h1>{{ user.name }}</h1>
    <UserStats :stats="userStats" @update="handleUpdate" />
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  props: {
    user: { type: Object, required: true }
  },
  data() {
    return { userStats: null }
  },
  computed: {
    fullName() { return `${this.user.firstName} ${this.user.lastName}` }
  },
  methods: {
    handleUpdate(stats) { this.userStats = stats }
  }
}
</script>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({ userId: { type: String, required: true } })

const user = ref(null)
const userStats = ref(null)

const fullName = computed(() => {
  if (!user.value) return ''
  return `${user.value.firstName} ${user.value.lastName}`
})

onMounted(async () => {
  user.value = await fetchUser(props.userId)
})

function handleUpdate(stats) {
  userStats.value = stats
}
</script>

{
  "vue.cursorRules": {
    "componentNavigation": true,
    "smartSelection": true,
    "templateHandling": true,
    "compositionApiSupport": true,
    "directiveAwareness": true
  }
}