跪拜 Guibai
← All articles
Vue.js · Frontend

How One Developer Swapped an 80k-Line jQuery App for Vue3 Without Permission

By 奶油mm ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Many organizations still run critical internal tools on unmodularized jQuery codebases where a single global variable can break production. This strategy shows how to modernize incrementally without a rewrite grant, keeping the backend untouched and the business unaware until the new stack proves itself.

Summary

An 80,000-line jQuery 1.12 and Bootstrap 3 admin panel, held together by decade-old comments warning against deletion, was silently migrated to Vue3 over three months. The migration started after a single variable-name collision in an 800-line function took down the entire site's styles, exposing the architecture's fragility. Rather than proposing a full rewrite, the developer embedded a Vite-powered Vue3 app alongside the legacy code, using Vue Router to intercept specific paths while hiding the old DOM container.

Vue components reused the existing jQuery AJAX wrapper through a thin adapter, so backend APIs required zero changes. For pages that needed partial upgrades, Web Components bridged jQuery frames with Vue interactive elements. The first fully converted page, the order list, went live with no incidents, and business users only noticed it felt faster.

Within weeks, four of six team members adopted Vue3 for new pages. The CTO eventually requested the remaining pages be migrated, unaware the groundwork had already been laid. The approach kept risk low by isolating each page, using hash-mode routing for compatibility, and splitting the 400KB+ bundle below 200KB with manual chunks and a CDN.

Takeaways
An 800-line jQuery function with reused global variables caused a site-wide style collapse after a 3-line change, exposing the architecture's brittleness.
Vue3 was embedded into the legacy project by adding a hidden mount point and using Vue Router to intercept specific paths, hiding the jQuery container on matched routes.
A thin adapter layer let Vue components call the existing jQuery AJAX wrapper directly, eliminating any need for backend changes.
Web Components served as a bridge, allowing Vue components to render inside jQuery pages as custom HTML elements for partial page upgrades.
The first fully refactored page, the order list, went live with zero bugs after three days of testing; business users only noticed improved speed.
Four of six team members adopted Vue3 for new pages within a month, and the CTO later requested the remaining pages be migrated.
Global Bootstrap 3 styles polluted Vue components until scoped styles and CSS Modules were applied to the Vue root node.
Memory leaks from uncleaned jQuery events were fixed by calling $.off() inside Vue's onUnmounted lifecycle hook.
Vue Router's history mode was swapped for hash mode to avoid server-side configuration changes the legacy project couldn't support.
The 400KB+ Vue3 and Element Plus bundle was reduced below 200KB for first-screen loads using Vite's manualChunks and a CDN.
Conclusions

The hardest part of a legacy rewrite is rarely the code; it's navigating organizational resistance by delivering incremental, provable business value that builds political cover.

Reusing the existing data layer rather than replacing it removes the largest source of risk and approval friction in frontend migrations.

Web Components are an underused migration tool: they let modern frameworks and legacy code coexist in the same DOM without either knowing about the other.

Silent, page-by-page replacement works because users judge software by speed and correctness, not by the framework that renders it.

Concepts & terms
Route hijacking
A migration technique where a modern router intercepts specific URL paths and renders new pages, while the legacy router handles the rest, allowing both stacks to coexist in the same application.
Web Components bridge
Using the Custom Elements API to wrap framework components (e.g., Vue SFCs) as standard HTML tags, so they can be dropped into legacy server-rendered or jQuery-built pages without framework conflicts.
legacyApi adapter
A thin wrapper that exposes an old global API object (like a jQuery AJAX utility) as a module import, letting modern code call existing backend interfaces without rewriting them.
From the discussion

The core tension is between the perceived technical merit of the secret rewrite and the political and professional risks it carries. Several voices argue that unapproved refactoring is a career-limiting move that shifts all liability onto the developer, disrupts team workload balance, and offers no reward even if successful. A smaller counter-current insists that rewriting with modern tools and AI is genuinely faster than maintaining legacy code and that the time saved benefits the developer directly.

Unapproved refactoring concentrates all blame on the developer if something breaks, with no support for testing.
Even a successful secret rewrite rarely leads to recognition or bonuses; it mainly creates a thankless maintenance burden.
Disrupting an established team pace can make one person absorb the work of many, leading to layoffs for others once stability is achieved.
Progressive replacement is seen by some as unnecessary showmanship when a full AI-assisted rewrite is faster and the front-end/back-end are already separated.
Others counter that rewriting in Vue can be faster than deciphering and extending old jQuery code, turning saved time into personal slack.
Legacy code often traps developers in fragile, monolithic functions where even basic fixes like variable shadowing are risky, though critics note closures could mitigate this.
AI tools are cited as making large-scale refactors (e.g., Vue2 to Vue3) trivial, challenging the idea that such work is inherently difficult or overtime-inducing.
The act is framed as a breach of workplace equilibrium: low wages reflect a deliberate pace, and a newcomer raising the bar forces that pace onto everyone.
Featured comments
_前端小菜鸟_ 2 likes

Are you telling a story or is this a real event? No one above you made the call, and you just went ahead and changed things below. If nothing goes wrong, fine, but if something does, the whole blame is yours. No one helps you test it; it's all on you. Also, what about the time? No other work? Just maintaining that one project?

Miles_ovo

No problem with that. The development pace is fast now, with lots of iteration tasks. I feel if the code runs, try not to touch it. Refactoring takes too much time and easily introduces bugs.

理子

Isn't it possible that rewriting the code in Vue yourself is faster than reading old code and adding features? The time saved is your own slacking-off time. Insisting on hacking away at a mountain of shit—is your skill lacking or do you just want to eat shit?

浪里个浪里小白龙 3 likes

Still too young, I can only say. Refactoring without getting approval from above is a major taboo. Never do this kind of thankless, unrewarding task... unless the boss or project lead gives the go-ahead.

薛定谔的玩具车 2 likes

People like this will get their comeuppance sooner or later. It's not that others can't make changes. It's that the boss pays low wages. You come in and upset the balance, and from now on all the work is yours.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗