mir-frontend-vuelisted

Make It Right (Vue reactivity tier). Vue 3.5 reactivity footguns shared across EVERY Vue meta-framework (Nuxt, Vite SPA, Quasar, legacy Vue CLI) — distinct from the generic frontend gates and from any one framework's mechanics. Covers where reactivity is silently lost (destructuring a reactive object, reassigning an array or object wholesale) and toRef/toRefs/toValue; computed purity — a side effect or fetch in a getter is a bug, because the getter is cached and may never re-run; watch vs watchEffect and pre/post/sync flush timing, deep-watch cost, and cleanup via onWatcherCleanup/effectScope plus the post-await registration trap; provide/inject typing and the non-reactive snapshot trap; v-for key correctness (index keys attach row state to the wrong row); defineModel; KeepAlive deactivation (onUnmounted never fires). Also carries Vue-runtime security: v-html, SSR cross-request state pollution from module-scope singletons, and VITE_-prefixed secrets in the client bundle. Chains: mir-frontend → this → mir-fron
anantbhandarkar/make-it-right · ★ 15 · Web & Frontend · score 81

Install: claude install-skill anantbhandarkar/make-it-right

# /mir-frontend-vue · Make It Right (Vue reactivity tier) Middle tier. `mir-frontend` decides **what is correct** (any reactive UI); this owns **Vue's reactivity model**, shared by every Vue meta-framework; the framework module knows the library's mechanics. Load order: `mir-frontend` → `mir-frontend-vue` → `<framework module>`. These footguns apply equally to Nuxt, a Vite SPA, and Quasar. Framework-specific wiring (server islands, `useAsyncData`/`useFetch`, Nitro routes, file-based routing, payload caching) lives in the framework module — not here. ## Version floor (checked against the npm registry and vuejs.org, 13 Aug 2026) | Package | Current stable | Notes | |---|---|---| | `vue` | **3.5.41** (5 Aug 2026) | Vue 3 is still the current major. There is no Vue 4. | | `vue` (next minor) | `3.6.0-rc.3` (11 Aug 2026) | **RC, not stable.** Vapor Mode + the alien-signals reactivity rewrite ship here. | | `eslint-plugin-vue` | **10.10.0** | Most footguns below have a rule in `flat/recommended`. | | `vue-tsc` | 3.3.9 | Type-checks templates. Run it in CI; `tsc` alone does not see `.vue`. | | `vite` | 8.2.1 | The build for every current Vue setup, Nuxt and Quasar included. | | `nuxt` · `quasar` · `pinia` · `vue-router` | 4.5.2 · 2.24.0 · 4.0.3 · 5.2.0 | Pinia 4 and Vue Router 5 are current majors — old snippets target 2 and 4. | **Three things stale advice still gets wrong.** 1. **Reactivity Transform (`$ref`, `$computed`, `$()`) was deprecated in 3.3 and removed in 3.4.** It