Vue Cursor Rules

Vue-Specific Rules

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

Component Navigation

• Navigate between component definitions
• Jump to lifecycle hook declarations
• Move between template sections

Smart Selection

• Select template blocks and expressions
• Expand selection to include directives
• Smart component prop selection

Code Manipulation

• Quick component insertion
• Automated directive handling
• Computed property management

Best Practices

• Use template-aware navigation
• Leverage directive-specific cursor movements
• Utilize component-aware selection

Examples

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

Configuration

Customize Vue-specific cursor rules in your settings:

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