Migrating a jQuery app to Vue without a big-bang rewrite

Everyone has seen the movie: a company decides to “modernize the frontend”, hires a team, spends eight months rebuilding everything in the new framework, and launches to a user base that hates it because it is slower and three features went missing. The frontend big bang almost always ends like this.

We do not do big bangs. We do stranglers.

What the strangler pattern means for frontends

The idea is borrowed from server migrations: wrap the old system, then replace it piece by piece until nothing is left. Applied to a jQuery app, it looks like this:

1. Put Vue on the page next to jQuery. They coexist fine. Vue does not care about jQuery’s event listeners.
2. Pick one self-contained widget. Not the most important one, the most independent one. A search box, a date picker, a form validation block.
3. Rebuild that widget in Vue, wrap it in tests, ship it behind a feature flag for a small percentage of traffic.
4. Watch errors and conversion metrics for a week. If it holds, roll it out to everyone and delete the jQuery version.

Repeat until the old code is gone. Value ships every week, not after eight months.

The checkout case

A retailer asked us to look at their checkout because the shipping calculator had become unreliable. It was driven by eleven different DOM events, several of them duplicated, all mutating shared state that lived partly in data- attributes and partly in localStorage.

We rebuilt the checkout as a Vue island with an explicit store. Then came the part most teams skip: we reproduced every calculation in unit tests, using real orders the client exported for us. Free shipping thresholds, region multipliers, weight rounding. Every one of them became a test case.

We shipped it behind a feature flag at 5% of traffic and watched. Conversion did not drop. Support tickets about shipping went down. After three weeks the flag went to 100%, and the old jQuery code was deleted in the same PR.

What about SEO?

If your content is rendered by JavaScript, Google may or may not render it, and you are gambling your rankings on “may”. For any page where search traffic matters, we keep the content server-rendered in the HTML and use Vue only for the interactive pieces. The migration should never mean trading your Google traffic for a nicer dev experience.

When not to do this

If the app is small and the jQuery code is a few hundred lines, just rewrite it. The ceremony of flags and gradual rollout is overhead you do not need. The strangler pattern earns its keep on apps with real users, real revenue, and enough surface area that a big bang is a genuine risk.

If you have a jQuery app and want an honest read on which approach fits, describe it to us. We will tell you if it is a weekend rewrite, a strangler, or something that should stay as it is.