---
title: "Slash Command: /vue-review"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/cmd-vue-review"
modality: "SLASH_COMMAND"
category: "Interactive Slash Commands"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Slash Command: /vue-review

**Summary:** Slash Command: /vue-review is a verified SLASH COMMAND blueprint on Promptally in Interactive Slash Commands optimized for leading AI models. Comprehensive Vue.js code review for Composition API correctness, reactivity, composable patterns, template security, accessibility, and Vue-specific performance. Invokes the vue-reviewer agent (and typescript-reviewer alongside on .vue/.ts changes). Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | SLASH_COMMAND |
| Category | Interactive Slash Commands |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 1,384 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

`````md
# Vue Code Review

This command invokes the **vue-reviewer** agent for Vue-specific code review. For pull requests touching `.vue` files or Vue-containing `.ts`/`.js` files, both `vue-reviewer` and `typescript-reviewer` should run — each owns a distinct lane.

## What This Command Does

1. **Identify Vue Changes**: Find modified `.vue` files and Vue-related `.ts`/`.js` files via `git diff`
2. **Run Lint**: Execute `eslint` with `eslint-plugin-vue`
3. **Typecheck**: Run `vue-tsc --noEmit` or the project's canonical typecheck command
4. **Review Vue Lanes Only**: Reactivity, composables, template security, accessibility, Vue-specific performance
5. **Generate Report**: Categorize issues by severity (CRITICAL / HIGH / MEDIUM)

## When to Use

Use `/vue-review` when:

- A PR or commit touches `.vue` files
- After writing or modifying Vue components, composables, or Pinia stores
- Before merging Vue code
- Auditing template security (`v-html`, URL bindings)
- Reviewing a new composable for correctness
- Auditing Vue Router guards and navigation
- Reviewing Nuxt server routes or SSR-specific code

For pure `.ts`/`.js` changes with no Vue imports, use `/code-review` (general) or invoke `typescript-reviewer` directly.

## Scope vs `/code-review` and TypeScript Review

| Tool | Scope |
|---|---|
| `vue-reviewer` (this command) | Reactivity, composables, template security, a11y, Vue performance, Pinia/Router |
| `typescript-reviewer` | Generic TS/JS — `any` abuse, async correctness, Node security |
| `security-reviewer` | Project-wide security audit |
| `/code-review` | Generic uncommitted-changes or PR review |

On a `.vue` / Vue-related PR, invoke both `vue-reviewer` and `typescript-reviewer`. Findings from each are non-overlapping by design.

## Review Categories

### CRITICAL (Must Fix)

- `v-html` with unsanitized input
- `:href`/`:src` with unvalidated user URLs (`javascript:`, `data:`)
- Secret in client bundle (`VITE_*`, Nuxt `public` runtimeConfig)
- Server endpoint without input validation (Nuxt Nitro)
- `localStorage`/`sessionStorage` for session tokens
- Destructuring reactive props in Vue < 3.5 (breaks reactivity)
- `reactive()` object replacement (breaks watchers)
- Watcher source tracking a ref object instead of `.value`

### HIGH (Should Fix)

- Composable with module-scope side effects
- Missing cleanup in composable (watcher, interval, listener)
- `v-for` without `:key` or with `key={index}`
- `v-if` + `v-for` on same element
- Props mutation
- Missing prop validation
- Route guard returning false without redirect
- `useRoute().params` destructured at top-level (snapshot)
- `v-model` bound to computed without setter
- Accessibility violations (missing labels, non-semantic interactive elements)
- Direct store property mutation outside actions

### MEDIUM (Consider)

- Options API in new Vue 3 code
- Component over 300 lines
- `v-show` where `v-if` is more appropriate (or vice versa)
- Missing `:max` on `<KeepAlive>`
- Missing `shallowRef` for large replaced data
- Custom validation instead of vetted form library
- `defineExpose` exposing more than necessary
- `inheritAttrs` not disabled when using `v-bind="$attrs"`

## Automated Checks Run

```bash
# Lint (required)
npx eslint . --ext .vue,.ts,.js

# Vue-specific typecheck
vue-tsc --noEmit

# Targeted security rules
npx eslint . --rule 'vue/no-v-html: warn' \
              --rule 'vue/no-template-target-blank: error'

# Supply-chain
npm audit
```

If `eslint-plugin-vue` or `vue-tsc` is not configured, the review will flag the gap as a HIGH config issue and continue.

## Example Usage

````text
User: /vue-review

Agent:
# Vue Code Review Report

## Files Reviewed
- src/components/UserCard.vue (modified)
- src/composables/useUser.ts (new)
- src/stores/useUserStore.ts (modified)

## Lint Results
PASS: eslint clean
PASS: vue-tsc clean

## Issues Found

[CRITICAL] Unsanitized v-html
File: src/components/UserCard.vue:15
Issue: User-controlled bio rendered as raw HTML via v-html.
Why: XSS via stored script tags in user input.
Fix: Sanitize with DOMPurify or render as text:
```vue
<script setup>
import DOMPurify from "dompurify";
const safeBio = computed(() => DOMPurify.sanitize(user.bio));
</script>
<template>
  <div v-html="safeBio" />
</template>
```

[HIGH] Watcher in composable missing cleanup
File: src/composables/useUser.ts:22
Issue: `watch` callback fires fetch without AbortController; stale responses can overwrite newer data.
Fix: Use onCleanup to abort:
```ts
watch(userId, async (newId, _old, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  const data = await fetch(`/api/users/${newId}`, { signal: controller.signal });
  user.value = await data.json();
});
```

## Summary
- CRITICAL: 1
- HIGH: 1
- MEDIUM: 0

Recommendation: FAIL: Block merge until CRITICAL issue is fixed
````

## Approval Criteria

| Status | Condition |
|---|---|
| PASS: Approve | No CRITICAL or HIGH issues |
| WARNING: Warning | Only MEDIUM issues (merge with caution) |
| FAIL: Block | CRITICAL or HIGH issues found |

## Integration with Other Commands

- Run your project's build command first if the build is broken
- Run tests to ensure component tests pass
- Run `/vue-review` before merging Vue code
- Use `/code-review` for non-Vue-specific concerns on the same PR

## Related

- Agent: `agents/vue-reviewer.md`
- Companion agent: `agents/typescript-reviewer.md` (run alongside for Vue-related TS/JS)
- Skills: `skills/vue-patterns/`
- Rules: `rules/vue/`
`````

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [Slash Command: /spawn](https://app.promptally.dev/p/cmd-spawn)
- [Slash Command: /pm](https://app.promptally.dev/p/cmd-pm)
- [Slash Command: /reflect](https://app.promptally.dev/p/cmd-reflect)
- [Slash Command: /git](https://app.promptally.dev/p/cmd-git)
- [Slash Command: /test](https://app.promptally.dev/p/cmd-test)
- [Slash Command: /select-tool](https://app.promptally.dev/p/cmd-select-tool)
- [Slash Command: /improve](https://app.promptally.dev/p/cmd-improve)
- [Slash Command: /agent](https://app.promptally.dev/p/cmd-agent)