Cursor Rules для Vue 3: готовый vue.mdc
Один синтаксис, props и emits по правилам, логика в composables
Какую задачу решает
Заставить агента писать единообразные Vue-компоненты
Что будет на выходе
Правила Cursor для Vue 3
- Кому подойдёт
Вайбкодер в Cursor, которому нужны правила агента для темы «Vue 3»
- Тема
- Агенты и Claude Code
- Инструменты
- Cursor
Агент пишет Vue-компоненты так, как видел их в интернете за все годы: один файл на Options API, другой на <script setup>, третий меняет пропсы напрямую, четвёртый тянет данные через axios, хотя в проекте уже есть общий composable. Каждый компонент по отдельности работает, вместе они читаются как код пяти разных команд.
Файл vue.mdc задаёт один способ: какой синтаксис, как объявлять props и emits, где лежит логика, как работать со стором и что обязательно для доступности. Cursor подключает его, когда агент трогает .vue-файлы и composables.
Показываешь ИИ package.json и два-три своих компонента, получаешь vue.mdc: script setup, типизированные props и emits, логика в composables, правила для Pinia и доступности. Новые компоненты выглядят как старые.
Что получишь
- 📐Один синтаксис
Только Composition API в <script setup lang="ts">, если так устроен твой проект. Никаких новых компонентов на Options API.
- 🔌Props и emits по правилам
defineProps и defineEmits с типами, пропсы не меняются внутри компонента, v-model через emit.
- 🪝Логика в composables
Повторяемая логика — в composables/use*.ts, запросы к API — через твой существующий клиент.
- ♿Доступность по умолчанию
Кнопки — это button, у полей есть label, у иконок-кнопок — aria-label.
Как использовать
- 1Собери образцы
package.json (версия Vue, Nuxt или Vite, Pinia, UI-библиотека), 2–3 компонента, которыми ты доволен, и один composable, если он есть.
- 2Запусти промпт
В Cursor внутри проекта или в любом ИИ-чате с файлами в квадратных скобках. Ответь на вопросы про стор и UI-библиотеку.
- 3Сохрани vue.mdc
Ответ целиком — в .cursor/rules/vue.mdc. Проверь, что globs совпадают с твоими папками.
- 4Проверь на новом компоненте
Попроси агента сделать, например, модальное окно подтверждения удаления. Сравни с твоими образцами по синтаксису, props и emits.
Рядом по теме: Cursor Rules для React и Next.js: готовый next.mdc, Cursor Rules для тестов: готовый tests.mdc, Cursor Rules для безопасности: готовый security.mdc, статья «Cursor или Claude Code» и 12 модов Claude Code для вайбкодера (490 ₽).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
Общие границы проекта задай в architecture.mdc, а внешний вид компонентов — в design.mdc без нейрослопа. Компоненты, которые агент написал, проверь по гайду «Как тестировать код, который написал агент». Если нужно добавить функцию в живой проект, пригодится «Новая функция, которая не ломает остальное».
