Skip to main content
affpapa.org
RU EN
rule

vue · patrickjs — Cursor rule: Vue.js practices for your project

A Cursor rule that tells the agent how to write Vue: Composition API, Pinia, typing and routing. Useful when the project already has .vue and .ts files.

Install into Cursor · Manually: put the files in place All methods and platforms ↓ 
.cursor/rules/vue.mdc
Open on GitHub

What vue does

The file .cursor/rules/vue.mdc plugs into Cursor and steers the agent's Vue code. It covers component structure, Composition API, state management, performance, routing, forms, TypeScript, testing and build tooling. The rule favours Composition API over Options API, Pinia for stores, and Vite for development.

Scope comes from globs: **/*.vue, **/*.ts, components/**/*. So it fires on Vue and TypeScript files rather than the whole repo. alwaysApply is set to false, which keeps the rule out of every chat.

One thing to weigh: these are general recommendations, not a linter. If your project deliberately runs Options API or Vuex, the rule pushes the agent the other way, so edit it to match your codebase.

What it helps with

  • write components with Composition API instead of Options API
  • move shared logic into composables
  • build modular Pinia stores
  • type props, emits and stores
  • set up lazy loading for components and routes

Example prompts for the agent

  • add a new task list component following the vue rule
  • refactor this component to Composition API
  • why is v-show better than v-if here

How to install vue

Manually: put the files in place

.cursor/rules/vue.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about vue

How do I install vue in Cursor?

Create .cursor/rules/vue.mdc in your project root and paste the rule contents into it. Cursor picks it up for the paths listed in globs.

What does the vue rule do?

It gives the agent a set of Vue practices: Composition API, composables, Pinia, typing, Vue Router, forms and tests. The agent follows them while writing or editing code.

Which files does the rule apply to?

**/*.vue, **/*.ts and components/**/*. Auto-apply is off, so the rule is not injected into every request.

Source text

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

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

vue by other authors comes first.

vue official github A Copilot instruction file that sets Vue 3 conventions: Composition API, <script setup>, reactivity, Pinia and Vue Router. Useful when the agent writes components your way. ★ 40,418repo stars Expert Vue.js Frontend Engineer official github GitHub Copilot subagent specialized in Vue 3, Composition API, TypeScript, and component architecture. Builds frontends, migrates from Vue 2, and optimizes rendering. ★ 40,418repo stars vue-expert https://github.com/Jeffallan Guides Vue 3 work with the Composition API, Nuxt 3, Pinia, and Vite. Use it for components, PWAs, and Quasar or Capacitor apps. CX Codex +1 4,500installs vue-best-practices github.com/vuejs-ai Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables. CX Codex +1 42,900installs clerk-vue-patterns clerk A skill that tells your agent how to wire Vue 3 to Clerk: composables, Vue Router guards and a Pinia auth store. CX Codex +1 14,000installs unit-test-vue-pinia official github Writes and reviews unit tests for Vue 3, TypeScript, Vitest and Pinia code. Useful when your tests reach into component internals instead of behavior. 1,800installs vue-expert-js https://github.com/Jeffallan Builds Vue 3 code in JavaScript with JSDoc annotations instead of TypeScript. Use it for components, composables, routing, and state management in JS-only projects. CX Codex +1 4,100installs

From the same set68

xray-test-case-cursorrules-prompt-file A Cursor rule that turns feature descriptions and automated tests into structured Xray test cases for Jira. Useful when QA writes manual scenarios by hand. ★ 41,011repo stars webassembly-z80-cellular-automata-cursorrules-prom A Cursor rule that walks the agent through adding a region grid to a Z80 cellular automata simulation built on WebAssembly. ★ 41,011repo stars vue-3-nuxt-3-typescript-cursorrules-prompt-file A Cursor rule that tells the agent how to write Vue 3 and Nuxt 3 code: Composition API, TypeScript interfaces, Nuxt conventions. Useful when the project already runs this stack. ★ 41,011repo stars vitest-unit-testing-cursorrules-prompt-file A Cursor rule that turns the agent into a Vitest and TypeScript test writer: it targets business logic and utilities, mocking dependencies with vi.mock. ★ 41,011repo stars unity-cursor-ai-c-cursorrules-prompt-file A Cursor rule that briefs the assistant on a Unity game project in C#: modular code, responsive mechanics, real-time performance. ★ 41,011repo stars typescript A Cursor rule that pins down how the agent writes TypeScript: types, naming, error handling. Useful when several people touch the same codebase. ★ 41,011repo stars typescript-vite-tailwind-cursorrules-prompt-file A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind. Useful when you want the agent's output to stay predictable. ★ 41,011repo stars typescript-nodejs-nextjs-react-ui-css-cursorrules- A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,011repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor