# Vue.js Excellence Prover MCP

> Vue.js Excellence Prover enforces modern Vue 3 Composition API standards for your components. It catches five major architectural flaws—like legacy Options API usage and lost reactivity when destructuring props—ensuring your front-end code is type-safe, performant, and production-ready.

## Overview
- **Category:** productivity
- **Price:** Free
- **Tags:** vue, vuejs, vue3, composition-api, pinia, typescript, frontend, reactivity

## Description

Writing complex Vue apps gets messy fast. You can write functional components that fail silently in production because of bad state management or missed type definitions. This MCP validates files against the current best practices for Vue 3, forcing you into a clean, modern architecture.

It doesn't just check syntax; it looks at how your component breathes. Does it use `data()` when it should be using `ref()`? Are you passing props down and handling events up, or is all the business logic trapped in the template? The tool validates five areas: composition API usage, reactivity boundaries, type safety, architectural patterns, and performance optimization.

When you run a file through this MCP, it verifies that your component adheres to strict rules like using `defineProps<T>()` instead of runtime options. Because all execution happens inside Vinkius’s secure sandbox, we guarantee the integrity of every single call; your keys never sit on a disk, and every tool invocation leaves an auditable trail. This lets you trust that the AI agent is checking your code against real-world standards, not just theoretical rules.

## Tools

### validate_vue_excellence
This runs a comprehensive audit of a Vue component file, checking for Composition API compliance, reactivity errors, type safety violations, architectural flaws, and performance issues.

## Prompt Examples

**Prompt:** 
```
I'm building a dashboard. export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } }
```

**Response:** 
```
Verdict: OPTIONS_API_DETECTED. Vue 3 requires `<script setup lang="ts">`. Replace `data()` with `ref()`. Options API is legacy and weakens TS inference.
```

**Prompt:** 
```
const props = defineProps({ user: Object }); const { id, name } = reactive(props.user);
```

**Response:** 
```
Verdict: REACTIVITY_BROKEN. Destructuring a reactive object loses reactivity. Use `toRefs()`. Mutating props is an anti-pattern.
```

**Prompt:** 
```
Component with <script setup lang="ts">. defineProps<{ id: string }>(). Pinia store for global state. Stable IDs as keys.
```

**Response:** 
```
Verdict: COMPONENT_PROVEN. Idiomatic Vue 3 composition. TypeScript strictly typed. Performance optimized with stable keys. Ship it.
```

## Capabilities

### Enforce Composition API
It forces components to use the modern `<script setup lang="ts">` structure, keeping logic contained and type-safe.

### Validate Reactivity Boundaries
The tool catches common bugs where developers accidentally lose reactivity by improperly destructuring props or mutating state directly.

### Enforce Compile-Time Types
It verifies that all properties and events are defined using strict TypeScript generics, preventing runtime type failures.

### Clean Component Architecture
The MCP confirms proper separation of concerns by ensuring business logic lives in composables, not in the component template itself.

### Check Performance Patterns
It flags performance anti-patterns like using array indices for keys or forgetting lazy loading on routes. This keeps your app snappy.

## Use Cases

### Migrating a Legacy Component
You pull an old component that uses `this.count++` from a Vue 2 codebase. Running it through the MCP instantly flags 'Options API Detected,' forcing you to rewrite it using `const count = ref(0)` and modern Composition API patterns.

### Complex Form State Management
You have a large form with many reactive inputs. The agent runs the file, identifies that state is being destructured incorrectly, and tells you to use `toRefs()`—keeping your object fully reactive for the template.

### Building Global State Handlers
You need to manage user permissions across several components. The MCP validates that you're using Pinia-typed stores and proper provide/inject patterns, avoiding messy event buses entirely.

### Optimizing Large Lists
When rendering a list of items, you accidentally use the index as the key. The MCP flags this performance degradation, telling you to switch to `:key="item.id"` to prevent ghost state and visual bugs.

## Benefits

- Stops the Options API creep: The tool immediately flags old syntax like `data()` or `methods:` in a Vue 3 file, forcing you to use `<script setup lang="ts">`.
- Guarantees reactivity flow: It catches the common mistake of destructuring reactive objects (e.g., `const { name } = reactive(user)`), which severs your binding and breaks state updates.
- Enforces type safety everywhere: You don't have to guess types anymore. The MCP validates that `defineProps` and `defineEmits` use explicit TypeScript generics, making everything compile-time checked.
- Cleans up architecture spaghetti: It ensures business logic stays in composable functions (like `useUserPermissions(user)`), keeping your main component file under 200 lines of code.
- Boosts performance automatically: By checking for stable `:key="item.id"` and flagging inefficient loops, it helps you eliminate subtle visual bugs caused by DOM node reuse.

## How It Works

The bottom line is, you get back a component that passes professional architectural scrutiny without leaving your editor.

1. Pass the component file through the tool to initiate a full code audit.
2. The MCP runs five distinct validation pillars—from reactivity checks to performance optimization scoring—against your source code.
3. It returns an actionable report detailing exactly which Vue violation occurred (e.g., 'Reactivity Broken' or 'Legacy Options API Detected') and how to fix it.

## Frequently Asked Questions

**Does Vue.js Excellence Prover handle Options API usage?**
Yes, absolutely. The MCP specifically detects when older syntax like `data()` or `methods:` appear in a file meant to be modern Vue 3, flagging it as legacy.

**How does validate_vue_excellence fix reactivity loss?**
It identifies the pattern where props are destructured from reactive objects. It then tells you to use `toRefs()` instead, which maintains the necessary reactivity links in your component's state.

**Is this MCP just a linter or does it check architecture?**
It’s more than a linter. It validates architectural patterns—like confirming that business logic is pulled out into dedicated composables, keeping your components minimal and readable.

**Can I use validate_vue_excellence with TypeScript?**
Yes. The tool requires TypeScript to perform its advanced type-safety checks on properties and emits, which is mandatory for enforcing the modern standards it supports.

**When I run validate_vue_excellence, how are my credentials secured?**
Your keys pass through a zero-trust proxy and never sit on disk. Vinkius executes the validation inside an isolated sandbox with 34+ security rules enforced for every single call.

**Does validate_vue_excellence catch common frontend performance issues?**
Yes, it checks for performance bottlenecks like stable list keys and lazy imports. It flags instances where you should use defineAsyncComponent or implement watcher throttling to keep the app fast.

**What specific Vue version does validate_vue_excellence require?**
It mandates adherence to modern standards, focusing on Vue 3.4+ functionality. This ensures you are using Composition API best practices and modern features like defineModel() for v-model.

**What architectural patterns does validate_vue_excellence enforce beyond just typing?**
It enforces clean architecture by requiring business logic separation. You must follow the 'props down, events up' pattern and use composables for reusable state management instead of putting everything in one file.

**Does this Prover write components from scratch?**
No. The AI agent writes the code. This tool acts as an automated architect, validating that every component respects the 2026-era Composition API rules, type constraints, reactive boundaries, and rendering performance.

**Why does it enforce Vue 3 Composition API over Options API?**
The Options API is legacy. Modern Composition API with  provides vastly superior TypeScript type inference, cleaner code reuse via composables, and more efficient production build compilation.

**How does it handle reactivity tracking and prevent memory leaks?**
The Prover inspects watch effects, computed properties, and external subscriptions, ensuring all watchers are bounded, memory hooks are cleaned up on unmount, and DOM mutations don't trigger circular reactivities.