Cursor Rules for
Vue.js

The Vue.js rule helps you write better Vue.js code by guiding Cursor's AI assistance with Vue component patterns, composition API best practices, and recommended conventions. This ensures the AI provides suggestions aligned with modern Vue.js development approaches.

What this rule does

This rule instructs Cursor's AI assistant to provide recommendations and code completions that align with Vue.js best practices. It focuses specifically on the Composition API approach and modern Vue.js component patterns, ensuring that generated code follows established conventions.

The rule guides the AI to recommend:

• Using the Composition API with <script setup> syntax
• Properly defining props with type definitions and default values
• Implementing component events through emits
• Utilizing v-model for two-way data binding
• Leveraging computed properties, watchers, and provide/inject appropriately
• Implementing code-splitting through async components

Using Vue.js in Cursor

The Vue.js rule is stored in the .cursor/rules directory as vuejs.mdc. It's configured as an auto-attached rule that activates automatically when you're working with Vue component files thanks to its glob pattern (**/*.vue). This means whenever you open or create a file with a .vue extension, Cursor automatically applies this rule's context to the AI.

If you want to explicitly invoke the rule in a non-Vue file, you can manually reference it by typing @vuejs in the chat or Cmd-K interface.

Vue.js best practices explained

Composition API with script setup

The rule encourages using Vue's Composition API with the <script setup> syntax:

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

This approach provides better TypeScript integration, improved code organization, and reduces boilerplate compared to the Options API.

Props and emits

Properly defining props with types and defaults improves component reusability and documentation:

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:count', 'submit'])

function handleSubmit() {
  emit('submit')
}
</script>

Computed properties and watchers

The rule recommends using computed properties for derived state and watchers for side effects:

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

const firstName = ref('John')
const lastName = ref('Doe')

// Computed for derived state
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

// Watcher for side effects
watch(fullName, (newValue) => {
  console.log(`Name changed to ${newValue}`)
})
</script>

Implementation tips

1. When starting a new Vue.js component, begin with the <script setup> tag to immediately leverage the Composition API's benefits.

2. Create consistent patterns for component communication:

   • Use props for parent-to-child data flow
   • Use emits for child-to-parent communication
   • Use provide/inject for deeply nested component trees

3. Implement v-model bindings for form components to simplify two-way data binding:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function updateValue(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

4. Use async components for large features to improve initial load performance:

const AdminDashboard = defineAsyncComponent(() => 
  import('./components/AdminDashboard.vue')
)

By utilizing this rule, you'll ensure that Cursor's AI suggestions align with modern Vue.js development practices, helping you write more maintainable and efficient components.