TypeScript · Vue 3
Vue 3 (Composition API) rules for Cursor
Script setup, typed props and reactivity rules that stop agents from writing Options API or Vue 2 patterns.
The rule
Save as .cursor/rules/vue.mdc. Cursor picks it up on the next request.
.cursor/rules/vue.mdc
--- description: Vue 3 Composition API conventions globs: **/*.vue alwaysApply: false --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
How Cursor loads this rule
Read from the frontmatter above, per Cursor's rules documentation.
alwaysApply: falsewithglobs: **/*.vue: attached automatically when a matching file is in context.- Keep the
.mdcextension. A plain.mdfile in .cursor/rules is ignored by the rules system. - Prefer to generate your own? Type
/create-rulein Agent and describe what you want; Cursor saves the file to .cursor/rules. - Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.
Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking
Vue 3 (Composition API) rules for Claude Code, Copilot, Kiro and other agents
The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.
AGENTS.md (section)
## Vue 3 (Composition API) - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Claude Code.claude/rules/vue.md
.claude/rules/vue.md
--- paths: - "**/*.vue" --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for GitHub Copilot.github/instructions/vue.instructions.md
.github/instructions/vue.instructions.md
--- applyTo: "**/*.vue" --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Kiro.kiro/steering/vue.md
.kiro/steering/vue.md
--- inclusion: fileMatch fileMatchPattern: ["**/*.vue"] --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Antigravity.agents/rules/vue.md
.agents/rules/vue.md
--- trigger: glob globs: "**/*.vue" --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Devin Desktop (Windsurf).devin/rules/vue.md
.devin/rules/vue.md
--- trigger: glob globs: **/*.vue --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Cline.clinerules/vue.md
.clinerules/vue.md
--- paths: - "**/*.vue" --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
Vue 3 (Composition API) rules for Continue.continue/rules/vue.md
.continue/rules/vue.md
--- name: "vue" globs: ["**/*.vue"] --- - Write single-file components with <script setup lang="ts">. Do not use the Options API or defineComponent with a setup() function. - Declare props and emits with type-based defineProps<...>() and defineEmits<...>(). - Use defineModel() for v-model on a component instead of a modelValue prop plus an update:modelValue emit. - Prefer ref() over reactive(). Do not destructure a reactive() object; that breaks reactivity. - Use computed() for derived values and watch() only for side effects; never copy a prop into local state just to read it. - Use useTemplateRef() for template refs. - Give every v-for a stable :key from the data, and never put v-if and v-for on the same element. - Do not mutate props; emit an event or update the model instead. - Move reusable stateful logic into composables named useSomething in the composables folder.
More templates
Next.js App RouterTypeScript (strict)React componentsPythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrailsNuxtSvelteKit (Svelte 5 runes)Angular (standalone components, signals)DjangoLaravelRuby on RailsNestJSSpring BootASP.NET CoreFlutterSwiftUI (iOS)Android (Kotlin, Jetpack Compose)React Native (Expo)Tailwind CSS (v4)Prisma ORM
Get Cursor rules and settings changes by email
When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.
Reviewed Oct 20, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.