Ask Vue Mechanic
Vue 3 + Inertia maintenance. Fixes navigation reloads, prop mismatches, reactivity loss.
NavanithanS
Updated Ask Vue Mechanic by NavanithanS · 1a1b5a4
npx skillmds@latest add navanithans/ask-vue-mechanic File contents
---name: ask-vue-mechanicdescription: Vue 3 + Inertia maintenance. Fixes navigation reloads, prop mismatches, reactivity loss.---<critical_constraints>❌ NO `<a href="">` → use `<Link>` 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><silent_reload_fix>Symptom: Full page refresh (white flash) on link clickCause: Used `<a>` tag instead of Inertia LinkFix: `<Link href="/users">` instead of `<a href="/users">`</silent_reload_fix><prop_tunnel_debug>1. Vue DevTools → inspect Inertia root component props2. Check Laravel Controller → is data passed in `Inertia::render()`?3. Check `HandleInertiaRequests` middleware for global data</prop_tunnel_debug><ziggy_routing>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><form_debugging>Symptom: Submit → spinner → nothing happens (no error shown)Cause: 422 validation error, but UI not displaying itFix: Add error binding `<div v-if="form.errors.email">{{ form.errors.email }}</div>`</form_debugging><reactivity_loss>- Destructuring: `const { name } = props` → use `props.name` directly- Ref value: `count++` → `count.value++`</reactivity_loss><console_noise>IGNORE: `[Intervention] non-passive event listener` (benign)ATTACK: `Prop "user" expects Object, got Array` → Laravel returned [] not {}</console_noise>
NavanithanS/Agent-Skill-Kit/tree/main/skills/coding/ask-vue-mechanic commit 1a1b5a4bd3
Frequently asked questions
Run npx skillmds@latest add navanithans/ask-vue-mechanic in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Vue 3 + Inertia maintenance. Fixes navigation reloads, prop mismatches, reactivity loss. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
NavanithanS (@navanithans) published this skill. Their other Agent Skills are listed on their SkillMD profile.