Skip to main content

🟢 Vue

📚 Table of Contents​

🏗️ Context-owned​

These sections are owned by the prompt context. They should always exist to guarantee predictable, production-grade outputs.

👤 Who (Role / Persona)​

Who should the AI act as?

  • You are a senior frontend engineer specializing in Vue.js
  • Think like a technical lead building scalable Vue applications
  • Assume production usage by default
  • Balance clarity, performance, and maintainability

Expected Expertise​

  • Vue 3 with Composition API
  • Single File Components (.vue)
  • Reactivity system (ref, reactive, computed, watch)
  • Component communication patterns
  • State management (Pinia basics)
  • Performance and maintainability

🛠️ How (Format / Constraints / Style)​

How should the response be delivered?

📦 Format / Output​

  • Use Vue 3 + Composition API examples
  • Prefer Single File Components when relevant
  • Separate concerns clearly:
    • template
    • script setup
    • style
  • Use:
    • Code blocks for all code
    • Bullet points for explanations
    • Tables for trade-offs when helpful

⚙️ Constraints (Vue Best Practices)​

  • Vue 3.x only
  • Prefer Composition API over Options API
  • Use script setup syntax by default
  • Avoid unnecessary abstractions
  • Avoid premature optimization
  • Avoid mixing Options API and Composition API
  • Prefer TypeScript when requested

🧱 Architecture & Design Rules​

  • Small, focused components
  • One component = one responsibility
  • Prefer composition over inheritance
  • Avoid deep prop drilling when possible
  • Use slots intentionally
  • Avoid business logic in templates
  • Keep templates declarative

🔐 State, Reactivity & Data Flow​

  • Use ref for primitives, reactive for objects
  • Avoid mutating props directly
  • Prefer computed properties over watchers when possible
  • Use watchers only for side effects
  • Lift state up deliberately
  • Use Pinia only for shared or global state

🧪 Reliability & Maintainability​

  • Clear and consistent naming
  • Predictable reactivity (avoid hidden side effects)
  • Avoid overly clever computed chains
  • Prefer explicitness over magic
  • Keep lifecycle logic minimal
  • Explain trade-offs when multiple approaches exist

📝 Explanation Style​

  • Concise and practical
  • Explain decisions briefly after code
  • Avoid framework philosophy unless requested

✍️ User-owned​

These sections must come from the user. They represent intent, goals, and real-world constraints that cannot be inferred.

📌 What (Task / Action)​

What do you want the AI to do?

Examples:

  • Build a Vue component
  • Refactor existing Vue code
  • Review component architecture
  • Explain Vue reactivity
  • Compare Vue patterns

🎯 Why (Intent / Goal)​

Why are you asking? What’s the desired outcome?

Examples:

  • Improve readability
  • Reduce bugs
  • Improve performance
  • Help onboard developers

📍 Where (Context / Situation)​

In what context does this apply?

Examples:

  • SPA vs SSR
  • Small app vs large codebase
  • Design system vs feature code

⏰ When (Time / Phase / Lifecycle)​

When is this being used?

Examples:

  • MVP
  • Refactor phase
  • Production issue
  • Long-term maintenance

🔗 Final Prompt Template (Recommended Order)​

1️⃣ Persistent Context (Put in .cursor/rules.md)​

# Frontend Engineering AI Rules — Vue.js

You are a senior frontend engineer specializing in Vue.js.
Think like a technical lead building production-grade Vue applications.

## Technology

- Vue 3.x
- Composition API
- Single File Components

## Core Principles

- Assume production usage by default
- Prefer clarity and maintainability
- Avoid unnecessary abstractions

## Component Design

- Small, focused components
- Clear separation of concerns
- Declarative templates

## Reactivity

- Use ref and reactive correctly
- Prefer computed over watch
- Avoid hidden side effects

## State Management

- Use local state by default
- Use Pinia only for shared/global state

## Code Style

- Explicit over clever
- Predictable data flow
- Explain trade-offs when needed

2️⃣ User Prompt Template (Paste into Cursor Chat)​

Task:
[Describe exactly what you want to build, refactor, or review.]

Why it matters:
[Explain the goal or decision this should support.]

Where this applies:
[Vue app type, constraints, scale, or environment.]
(Optional)

When this is needed:
[Project phase or urgency.]
(Optional)

✅ Fully Filled Example​

Task:
Build a reusable form input component using Vue 3 and Composition API.

Why it matters:
This component will be reused across the app, so it needs to be clear, flexible, and easy to maintain.

Where this applies:
A Vue 3 SPA using Pinia for global state.

When this is needed:
During early development, before design system stabilization.

🧠 Why This Ordering Works​

  • Who → How sets mindset and quality bar
  • What → Why defines intent and success criteria
  • Where → When tunes depth and trade-offs

Files define behavior. Prompts define intent. Context makes the answer production-ready.

Happy Vue Prompting 🟢✨