mir-frontend-vue-nuxtlisted
Install: claude install-skill anantbhandarkar/make-it-right
# /mir-frontend-vue-nuxt · Make It Right (Nuxt)
Bottom of the chain: `mir-frontend` (generic gates) → `mir-frontend-vue` (Vue reactivity) → **this** (Nuxt + Nitro mechanics). Run the gates first, load the Vue tier for reactivity, reach for this at Gate 5 (design), Gate 6 (implementation), and Gate 7 (review). **Vue-level concerns — `ref` vs `reactive`, `watch` vs `computed`, `provide`/`inject`, template refs — live in `mir-frontend-vue`, not here.**
**Stack assumed**, versions verified 13 Aug 2026: Nuxt **4.5.2** (npm `latest`) · Vue 3.5.x · vue-router 5 (since Nuxt 4.4) · Nitro via `@nuxt/nitro-server` 4.5.2 over `nitropack` 2.13.x + h3 1.15.x · Vite 8 (Rolldown) or Rspack 2 · unhead v3. Node `^22.19.0 || ^24.11.0 || >=26.0.0`.
- **Nuxt 3 reached end of life 31 July 2026** (3.21.11 is the last maintenance release). A Nuxt 3 app is an unpatched app — put that in the Gate 4 risk register, not in a footnote. **Version floor is 4.5.1**; anything below carries the July 2026 advisory set, including a cross-user data disclosure (see Security).
- **Nuxt 5 is not released.** `future.compatibilityVersion: 5` opts into its breaking changes early. Do not put that flag in a Gate 5 design without labelling it a preview.
## The Nuxt footguns AI walks into
### 1. Universal rendering — know what runs twice
Component `setup()` runs on the server to produce HTML, then runs **again** in the browser to hydrate. Anything non-deterministic between the two runs produces a hydration mismatch: