vue

Un conjunto de reglas para escribir y organizar aplicaciones web con Vue.js, un framework de JavaScript para crear interfaces. Cubre componentes, TypeScript, estado de la aplicación, navegación, formularios y rendimiento.

In plain words
What is it for?
Sirve como guía al crear componentes, usar la Composition API, gestionar datos con Pinia, configurar Vue Router, validar propiedades y mejorar la carga de la interfaz.
Why use it?
Ayuda a mantener una aplicación Vue coherente y reduce problemas causados por componentes demasiado grandes, estado desordenado, rutas mal configuradas o actualizaciones innecesarias.

Cursor rule

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add rules/toptalentcoder/cursor-awesomerules/vue
Clone the repo
git clone --depth 1 https://github.com/toptalentcoder/Cursor-AwesomeRules
Per session 440 This file is loaded in full into every session.
When invoked 440 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00440 $0.00440
Opus 5 $0.00220 $0.00220
Sonnet 5 $0.00088 $0.00088
Haiku 4.5 $0.00044 $0.00044

Measured 2d ago against content hash b1f3d9b342a0, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

vue scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to vue — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

rules-new/vue.mdc · 86 lines

What it actually says


description: Vue.js best practices and patterns for modern web applications globs: /.vue, **/.ts, components//*

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
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 86 lines · 440 tokens per session scan A b1f3d9b342a0

Subscribe to this mod's changes

vue is a cursor rule published in the GitHub repository toptalentcoder/Cursor-AwesomeRules (6 stars, last pushed 1y ago), licensed CC0-1.0. It adds 440 tokens to every session, about $0.0022 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to vue, differing in 0 lines, and is treated as a copy.