Overview
MemoryShare is a leading funeral live streaming platform whose web portal, over many years, had become a sprawling Vue 2 monolith (300+ SFCs, and many outdated dependencies) originally built with Vue‑CLI, Vuex, Vuetify 2.
I was hired to revamp the existing Vue 2 app and lead a complete technical transformation into a lightweight, high‑performance SPA powered by Vue 3 + Vite.
Observations & Challenges
| Issue | Impact |
|---|---|
| Slow builds | Slow builds, development server startup time, and sluggish HMR hampering rapid iteration |
| Reliance only on manual testing | Low test coverage, frustrating regressions in production |
| Ever-growing legacy code | 110k+ lines of monolithic Vue 2 project, difficult to maintain |
| Un-optimized builds | Large bundle sizes, and dependency bloat |
| Guestbook Proof‑of‑concept | Not-production ready and lacking a proper build pipeline |
The goal: Modernize the tech stack, ensure high reliability, reduce bundle size, and increase developer experience.
Approach & Implementation
Vue 3 + Vite Migration
- Strategy – Incremental rewrite of a Vue 2 app to Vue 3.
- Key Steps:
- Update to the latest NodeJS.
- Starting with replacing Vue‑CLI with Vite for faster dev and build times.
- Utilize Git worktrees to develop both branches simultaneously.
- Switched to Composables, Composition API and
<script setup>for cleaner code on new SFCs.- While incrementally updating existing components over as needed.
- Upgraded from Vuetify version 2 to Vuetify 4.
- Replaced deprecated Vue 2 plugins with Vue 3‑compatible alternatives.
- Migrated from VueX stores to Pinia.
Results & Impact
- 80% reduction in build time
- 102% Increase in Lighthouse performance score.
| Metric | Before | After | Improvement |
|---|---|---|---|
| Build time | 1-3 min | ~30secs | 40-80% |
| Dev server startup | 30s | ~400ms | 99% |
| HMR time | 5s | ~200ms | 96% |
Lessons Learned
- Git Worktrees was a crucial factor in seamlessly developing on the new stack while having the main branch open for any bug/hot-fixes that needed shipping. Completely eliminating the need to stash and then reinstall dependencies.
- Incremental migration is less risky than a full rewrite; it allows continuous delivery and immediate quality gains.
- Developer Experience: Increasing HMR and dev server startup times had a direct impact in increasing developer output.
Outcome
MemoryShare’s transformation showcases how a well‑planned migration to a modern frontend stack combined with testing and performance optimizations can deliver measurable business value:
- faster builds
- better user engagement
- quicker development cycle
- and smoother releases.