правило

vue · patrickjs — правило для Cursor: практики Vue.js в вашем проекте

Q: Как установить vue в Cursor?

Создайте файл `.cursor/rules/vue.mdc` в корне проекта и вставьте в него содержимое правила. Cursor подхватит его по указанным в `globs` путям.

Q: На какие файлы распространяется правило?

На `**/*.vue`, `**/*.ts` и `components/**/*`. Автоприменение выключено, так что правило не подмешивается в каждый запрос.

Правило для Cursor задаёт агенту стиль работы с Vue: Composition API, Pinia, типизация и маршрутизация. Пригодится, когда в проекте уже есть .vue и .ts.

Установить в Cursor · Вручную: положить файлы Все способы и платформы ↓

.cursor/rules/vue.mdc

Открыть на GitHub

Что делает vue

Файл .cursor/rules/vue.mdc подключается к Cursor и подсказывает агенту, как писать код на Vue. Внутри — набор разделов: структура компонентов, Composition API, управление состоянием, производительность, маршрутизация, формы, TypeScript, тесты, сборка. Правило советует Composition API вместо Options API, Pinia для сторов, Vite для разработки.

Область применения задана через globs: **/*.vue, **/*.ts, components/**/*. То есть правило срабатывает на файлах Vue и TypeScript, а не на всём репозитории. alwaysApply выставлен в false, поэтому в каждом чате правило не висит.

Учтите: это общие рекомендации, а не проверка кода. Если в проекте намеренно используется Options API или Vuex, правило будет тянуть агента в другую сторону — тогда его стоит отредактировать под себя.

Какие задачи решает

писать компоненты на Composition API вместо Options API
вынести общую логику в composables
собрать сторы на Pinia и держать их модульными
настроить типы для props, emits и сторов
разложить ленивую загрузку компонентов и маршрутов

Примеры запросов агенту

добавь новый компонент списка задач по правилам vue
отрефактори этот компонент под Composition API
почему здесь лучше v-show, а не v-if

Как установить vue

Вручную: положить файлы

.cursor/rules/vue.mdc

Во frontmatter: description, globs, alwaysApply

Вручную: положить файлы

.claude/rules/vue.md

Поле paths во frontmatter ограничивает файлы: globs из источника → paths

Вручную: положить файлы

.github/instructions/vue.instructions.md

Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

Вручную: положить файлы

.devin/rules/vue.md

Вручную: положить файлы

.clinerules/vue.md

По шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules

Вопросы о vue

Как установить vue в Cursor?

Создайте файл .cursor/rules/vue.mdc в корне проекта и вставьте в него содержимое правила. Cursor подхватит его по указанным в globs путям.

Что делает правило vue?

Задаёт агенту набор практик для Vue-проектов: Composition API, composables, Pinia, типизацию, работу с Vue Router, формы и тесты. Агент опирается на них, когда пишет или правит код.

На какие файлы распространяется правило?

На **/*.vue, **/*.ts и components/**/*. Автоприменение выключено, так что правило не подмешивается в каждый запрос.

Исходный текст

vue.mdc · CC0-1.0

---
description: "Vue.js best practices and patterns for modern web applications"
globs: **/*.vue, **/*.ts, components/**/*
alwaysApply: false
---
# Vue.js Best Practices

## Component Structure
- Use Composition API over Options API
- Keep components small and focused
- Use proper TypeScript integration
- Implement proper props validation
- Use proper emit declarations
- Keep template logic minimal

## Composition API
- Use proper ref and reactive
- Implement proper lifecycle hooks
- Use composables for reusable logic
- Keep setup function clean
- Use proper computed properties
- Implement proper watchers

## State Management
- Use Pinia for state management
- Keep stores modular
- Use proper state composition
- Implement proper actions
- Use proper getters
- Handle async state properly

## Performance
- Use proper component lazy loading
- Implement proper caching
- Use proper computed properties
- Avoid unnecessary watchers
- Use proper v-show vs v-if
- Implement proper key management

## Routing
- Use Vue Router properly
- Implement proper navigation guards
- Use proper route meta fields
- Handle route params properly
- Implement proper lazy loading
- Use proper navigation methods

## Forms
- Use v-model properly
- Implement proper validation
- Handle form submission properly
- Show proper loading states
- Use proper error handling
- Implement proper form reset

## TypeScript Integration
- Use proper component type definitions
- Implement proper prop types
- Use proper emit declarations
- Handle proper type inference
- Use proper composable types
- Implement proper store types

## Testing
- Write proper unit tests
- Implement proper component tests
- Use Vue Test Utils properly
- Test composables properly
- Implement proper mocking
- Test async operations

## Best Practices
- Follow Vue style guide
- Use proper naming conventions
- Keep components organized
- Implement proper error handling
- Use proper event handling
- Document complex logic

## Build and Tooling
- Use Vite for development
- Configure proper build setup
- Use proper environment variables
- Implement proper code splitting
- Use proper asset handling
- Configure proper optimization

Из того же набора68