feat(web): migrate frontend to Nuxt 4 + Vue 3 + Vuetify 4 by AchoArnold · Pull Request #904 · NdoleStudio/httpsms

AchoArnold · 2026-05-26T09:02:59Z

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

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…n, BackButton, CopyButton, FixedHeader, BlogAuthorBio, BlogInfo, NuxtLogo, FirebaseAuth, MessageThread, MessageThreadHeader) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Login, Index (homepage with features, pricing, FAQ) - Threads (index + [id] detail with message bubbles, Pusher real-time) - Messages (new message form) - Search Messages (search by ID/content) - Bulk Messages (file upload + history table) - Settings (API key, webhooks, discord, send schedules) - Billing (usage stats, plan upgrade) - Heartbeats, Phone API Keys - Blog (index + 7 articles) - Privacy Policy, Terms and Conditions All pages use <script setup lang=ts>, Pinia stores, useDisplay(), and Vuetify 4 component API. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Copy all static assets (images, templates, favicon) to public/ - Create chart.client.ts plugin (Chart.js registration) - Create vue-glow.client.ts placeholder plugin - Refactor useApi composable to export both useApi() and useApiComposable() Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Fix Vuetify styles configFile path (remove doubled app/ prefix) - Add default export to capitalize utility - Install firebaseui and firebase-admin dependencies - Disable SSR session cookies for vuefire auth (client-only auth) - Disable route prerendering (requires env vars at build time) Build now completes successfully with pnpm run build. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The original Nuxt 2 app was a static SPA. SSR requires Firebase service account credentials at runtime which complicates deployment. SPA mode matches the original behavior and simplifies hosting. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

codacy-production · 2026-05-26T09:05:47Z

Not up to standards ⛔

🔴 Issues 48 high · 6 medium · 46 minor

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

Results:
100 new issues

Category Results

BestPractice 6 medium
2 high

ErrorProne 44 high

Security 2 high

CodeStyle 46 minor

View in Codacy

🟢 Metrics 387 complexity · 0 duplication

Metric Results

Complexity 387

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.}

- Add lint/test placeholder scripts so CI pnpm lint/test pass - Update web.yml: use pnpm build instead of generate, fix output dir - FirebaseAuth: use firebase/compat/app + firebase/compat/auth (FirebaseUI requires the namespaced compat API, not modular) - Use AuthUI.getInstance() to avoid duplicate instance errors - Remove playwright from committed devDependencies Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Pre-bundle commonly used dependencies to prevent runtime re-optimization that causes transient import failures. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Replace privacy policy with full production text (9 sections) - Replace terms and conditions with full production text - Fix all 7 blog articles with correct production content - Fix blog index with correct titles, dates, reading times, authors - Remove nuxt-vuefire module (causes server-side Firebase errors) - Add client-only Firebase plugin that skips init without API key - Migrate all typography classes to Vuetify 4 (MD3) - Add blank layout for login page - Remove test/debug scripts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Install v-phone-input and flag-icons packages - Create vPhoneInput.client.ts plugin with autocomplete country selector, SVG flags, and validation disabled (validate: null) - Add v-phone-input to build.transpile in nuxt.config.ts - Replace VTextField with v-phone-input in messages/index.vue - Add getRecipientNumber() to handle short codes by stripping country dial code prefix when the number is not a valid E.164 phone number This allows sending SMS to short code numbers (e.g. 91291) without the frontend prepending a country code. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Add explicit type annotations to resolve @typescript-eslint/no-unsafe-* rules - Cast useRuntimeConfig().public to Record<string, string> for type safety - Use String#endsWith() instead of manual char comparison in stores/app.ts - Import type from ofetch for createApiFetch return type - Use relative imports in useFilters.ts instead of ~ alias - Add explicit useAuthStore imports in middleware and firebase plugin - Type the firebase compat dynamic import callback parameter - Add Plugin type annotation for vPhoneInput - Add nuxt-shims.d.ts for Nuxt auto-import type declarations - Update tsconfig.json with paths and include for external analysis tools Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The FirebaseAuth component calls firebase.auth() synchronously on mount, but the compat SDK was being initialized in a non-blocking .then() callback. Make the plugin async so the compat app is ready before components mount. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…breakpoints - Replace FirebaseUI + compat SDK with custom auth UI using signInWithPopup - Support Google, GitHub, and Email/Password auth via modular Firebase SDK - Remove firebaseui dependency and firebase/compat imports - Remove async plugin (no longer needed without compat initialization) - Remove custom display.thresholds to use Vuetify 4 defaults - Remove firebase/compat/app and firebase/compat/auth from Vite optimizeDeps Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Delete assets/styles/settings.scss that overrode Vuetify grid breakpoints - Remove moduleOptions.styles configFile reference from vuetify config - Remove scss preprocessorOptions (no longer needed without settings file) - Vuetify 4 default breakpoints are now used throughout Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Replace old Vuetify 2 breakpoint values (1264px, 1904px) with Vuetify 4 defaults (1280px, 1920px) in threads page media queries. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…908) * fix(web): restore original content on all statically generated pages Restore word-for-word content from backup/web-nuxt2-vuetify2 branch while keeping Vuetify 4 component syntax. Fixes: - Blog page titles restored to original wording - Missing images added back (VImg with /img/blog/ paths) - Missing VAlert warning/info boxes restored - Code blocks with syntax highlighting restored (including tabbed JS/Go) - Internal links restored as NuxtLink components - Bold text, code tags, and formatting preserved - Meta tags (og:title, og:description, og:image, twitter:card) restored - BackButton and VDivider footer restored on all pages - Blog index listing titles and descriptions corrected - Privacy policy and terms pages: BackButton + styled email link Pages fixed (11 total): - 7 blog posts + blog index - Homepage, privacy policy, terms and conditions Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor(web): update blog pages to MD3 typography classes Replace Vuetify 2 typography classes with Material Design 3 equivalents: - text-h3/text-md-h2 → text-display-small/text-display-medium (responsive via useDisplay) - text-h4 → text-headline-large - text-subtitle-1 → text-body-large Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix(web): address PR review comments - Fix shared selectedTab ref in e2e encryption page (split into encryptTab, sendTab, receiveTab so tab groups are independent) - Fix wrong og:description on grant-sms-permissions page (was copied from encryption article) - Fix wrong og:description on excel page (was copied from python article) - Fix read-time prop to readTime (camelCase) on grant-sms page - Fix duplicate 'Step 3' headings in excel and CSV pages (second is now Step 4) - Fix typos in blog index: 'zapper' → 'Zapier', 'IFTTFT' → 'IFTTT' - Fix wrong description for SMS permissions article in blog index Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…etify4 # Conflicts: # .gitignore # web/package.json # web/pages/billing/index.vue # web/pages/messages/index.vue # web/plugins/filters.ts # web/pnpm-lock.yaml

- Add formatBillingPeriodDateOrdinal filter for ordinal date display - Update BillingUsage type to match API (start_timestamp/end_timestamp) - Add subscription_renews_at/subscription_ends_at to User type - Rewrite billing page with full feature set: - Current plan management (update, cancel, upgrade) - Personalized billing period overview with start/end dates - Usage history table with start/end date columns - Subscription payments table with invoice generation - Multiple upgrade plan options for free users Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

AchoArnold and others added 13 commits May 26, 2026 10:18

docs: add migration design spec for Nuxt 4 + Vuetify 4 upgrade

48dee82

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

docs: add implementation plan for Nuxt 4 + Vuetify 4 migration

bd0e8bf

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): scaffold fresh Nuxt 4 project for migration

2dd7555

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): configure nuxt.config.ts with Vuetify 4, VueFire, Pinia

0a55981

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): port utilities, types, and composables

7133dc3

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): create all Pinia stores and route middleware

1e02f62

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): port layouts (default, website, error) to Nuxt 4

edc3fc9

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): port all components (Toast, LoadingDashboard, LoadingButto…

335e6d2

…n, BackButton, CopyButton, FixedHeader, BlogAuthorBio, BlogInfo, NuxtLogo, FirebaseAuth, MessageThread, MessageThreadHeader) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

feat(web): add Dockerfile and nginx config for Nuxt 4

8cb4701

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

AchoArnold and others added 16 commits May 26, 2026 12:13

fix(web): add Vite optimizeDeps for stable dev server

b681014

Pre-bundle commonly used dependencies to prevent runtime re-optimization that causes transient import failures. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

chore: remove screenshot and test artifacts

c33e887

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

fix(web): update hardcoded media queries to Vuetify 4 breakpoints

02ddbf8

Replace old Vuetify 2 breakpoint values (1264px, 1904px) with Vuetify 4 defaults (1280px, 1920px) in threads page media queries. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Remove agents

7870011

Merge remote-tracking branch 'origin/main' into feat/migrate-nuxt4-vu…

39c5e6d

…etify4 # Conflicts: # .gitignore # web/package.json # web/pages/billing/index.vue # web/pages/messages/index.vue # web/plugins/filters.ts # web/pnpm-lock.yaml

Add tsbuildinfo

ae22ccb

Fix all issues on the index page

a0380bb

AchoArnold added 2 commits May 31, 2026 23:06

Fix all other pages except login

982c7aa

Fix the login page

ff2f6a0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

feat(web): migrate frontend to Nuxt 4 + Vue 3 + Vuetify 4#904
AchoArnold wants to merge 31 commits into
mainfrom
feat/migrate-nuxt4-vuetify4

AchoArnold commented May 26, 2026

Uh oh!

codacy-production Bot commented May 26, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

AchoArnold commented May 26, 2026

Summary

Approach

Key Changes

What's Included

Vuetify 4 Breaking Changes Applied

Environment Variables Required

Testing

Uh oh!

codacy-production Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Not up to standards ⛔

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

codacy-production Bot commented May 26, 2026 •

edited

Loading