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.

## Vue-Specific Rules

Cursor rules in Vue provide intelligent navigation and manipulation capabilities designed for Vue development. These rules help you work efficiently with components, directives, and template syntax.

### Component Navigation

- Navigate between component definitions and usages
- Jump to lifecycle hook declarations and methods
- Move between template sections and script blocks
- Access component props and computed properties

### Smart Selection

- Select template blocks and expressions
- Expand selection to include directives and arguments
- Smart component prop and event selection
- Select complete component definitions including all blocks

### Code Manipulation

- Quick component creation and refactoring
- Directive handling and optimization
- Computed property and watcher management
- Template structure manipulation

## Best Practices

- Use template-aware navigation for clear organization
- Leverage directive-specific cursor movements
- Utilize component-aware selection patterns
- Follow Vue component lifecycle patterns
- Implement Composition API patterns where applicable

<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
  }
}