feat(web): migrate frontend to Nuxt 4 + Vue 3 + Vuetify 4

[AchoArnold]

Summary

Complete frontend migration from Nuxt 2 + Vue 2 + Vuetify 2 to Nuxt 4.4.6 + Vue 3.5.34 + Vuetify 4.0.7.

Approach

Fresh project scaffolding (the gap between Nuxt 2 and 4 is too large for in-place upgrade). All code ported incrementally with TypeScript throughout.

Key Changes

• Framework: Nuxt 2 → Nuxt 4, Vue 2 → Vue 3, Vuetify 2 → Vuetify 4
• State management: Vuex → Pinia
• Component style: Options API / class decorators → <script setup> Composition API
• Auth: nuxt-vuefire replaces custom Firebase plugin
• Routing: _param → [param] dynamic route syntax
• Mode: SPA (matching original static site generation behavior)

What's Included

• ✅ 21 pages ported (homepage, login, threads, messages, settings, billing, blog articles, etc.)
• ✅ 12 components migrated with Vuetify 4 API changes
• ✅ 3 layouts (default, website, error)
• ✅ 5 Pinia stores (auth, messages, phones, heartbeats, notifications)
• ✅ Composables, utilities, TypeScript types
• ✅ Docker + nginx production config
• ✅ All routes verified (HTTP 200, no compilation errors)
• ✅ Production build passes cleanly

Vuetify 4 Breaking Changes Applied

• VSnackbar: #action → #actions slot
• VSelect/VTextField: outlined → variant="outlined", dense → density="compact"
• VList: #prepend slot pattern
• Typography classes updated
• VTooltip/VMenu: scoped #activator="{ props }" with v-bind="props"
• $vuetify.breakpoint → useDisplay() composable
• VTimeline, VTabs, VExpansionPanel API updates
• VSimpleTable → VTable

Environment Variables Required

Firebase config vars needed at runtime:
FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN, FIREBASE_PROJECT_ID, FIREBASE_STORAGE_BUCKET, FIREBASE_MESSAGING_SENDER_ID, FIREBASE_APP_ID, FIREBASE_MEASUREMENT_ID

Testing

cd web
pnpm install
pnpm dev        # Dev server on localhost:3000
pnpm run build  # Production build

[codacy-production]

Not up to standards ⛔

🔴 Issues 5 high · 95 minor

Alerts:
⚠ 100 issues (≤ 0 issues of at least minor severity)

Results:
100 new issues

Category	Results
BestPractice	1 high
ErrorProne	3 high
Security	1 high
CodeStyle	95 minor

View in Codacy

🟢 Metrics 332 complexity · 0 duplication

Metric	Results
Complexity	332
Duplication	0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}