ask-vue-mechanic
Vue 3 + Inertia maintenance. Fixes navigation reloads, prop mismatches, reactivity loss.
Resources
4Install
npx skillscat add navanithans/agent-skill-kit/ask-vue-mechanic Install via the SkillsCat registry.
SKILL.md
❌ NO `` → use `` to prevent full page reload
❌ NO destructuring props → loses reactivity, use `toRefs(props)` or `props.name`
❌ NO forgetting `.value` → `count.value++` not `count++`
✅ MUST trace upstream to Laravel Controller for missing props
✅ MUST run `php artisan optimize:clear` after route changes
</critical_constraints>
Symptom: Full page refresh (white flash) on link click
Cause: Used `` tag instead of Inertia Link
Fix: `` instead of ``
</silent_reload_fix>
1. Vue DevTools → inspect Inertia root component props
2. Check Laravel Controller → is data passed in `Inertia::render()`?
3. Check `HandleInertiaRequests` middleware for global data
</prop_tunnel_debug>
Error: `'users.show' is not in the route list`
Fix 1: `php artisan optimize:clear`
Fix 2: Check route in `routes/web.php` has `->name('users.show')`
Fix 3: Pass params: `route('users.show', user.id)`
</ziggy_routing>
Symptom: Submit → spinner → nothing happens (no error shown)
Cause: 422 validation error, but UI not displaying it
Fix: Add error binding `
{{ form.errors.email }}
`
</form_debugging>
- Destructuring: `const { name } = props` → use `props.name` directly
- Ref value: `count++` → `count.value++`
</reactivity_loss>
IGNORE: `[Intervention] non-passive event listener` (benign)
ATTACK: `Prop "user" expects Object, got Array` → Laravel returned [] not {}
</console_noise>
Categories
Install
npx skillscat add navanithans/agent-skill-kit/ask-vue-mechanic Install via the SkillsCat registry.