From Slow to Seamless: Transitioning a Large Site to Nuxt Without Downtime

For more than a decade, Fidelity Solutions has been the technical team behind one of the electronic industry’s biggest websites, TrustedParts.com. Over a year ago, we decided to re-architect a fundamental piece of the site’s technology stack to turbocharge the website and our development process.

We are nearly done migrating the front end of TrustedParts.com from ASP.NET and Vue.js to Nuxt 3—and the results have been very positive. This article will briefly share some of our thoughts behind that choice, an overview of how we accomplished it, and some of the lessons we learned along the way.

Why Use Nuxt Instead of Vue & ASP.NET?

Visitors to TrustedParts.com perform almost 20 million searches every month across a constantly changing product catalog of more than 30 million parts, and they expect fast, accurate results. The Microsoft technology stack has served us well for years, in that we could query the catalog and quickly render search results and product detail pages for users and search engines. On the front end, after the page HTML and assets downloaded, Vue JavaScript applications enabled additional user interactivity. Throughout this period, we kept a close eye on web performance and SEO metrics.

Over time, maintaining server templates (Razor) and client templates (Vue) became increasingly complicated, so we were intrigued by Nuxt’s server-side rendering (SSR). We experimented with Nuxt and realized that it would be a big win regarding both performance and productivity, but it wasn’t feasible for us to replace our .NET middle-tier layer or halt all development while making the transition. It would be like remodeling your home’s interior room-by-room, while your family lives there during construction, so you must leave the walls, plumbing, and electrical intact.

Technical Overview: Transitioning to Nuxt Progressively & Safely 

Our .NET web application was already containerized and behind an NGINX load balancer, so we were able to simply create a new containerized Nuxt application for the new frontend that would execute alongside the .NET container. Crucially, we ensured that the new Nuxt app could access the .NET data API endpoints either on the server or the client.

Then, we recreated the site “shell,” or the header, footer, and general components, in Nuxt. There was always the temptation to take on a visual redesign at the same time, but we were careful to make our new Nuxt app as visually identical to the .NET app as possible. We proceeded to recreate each page one by one: the home page, the part category page, the part detail page, the search page, and so on.

Any C# data access code in the .NET app was exposed to the Nuxt app through API endpoints, which was much easier and safer than migrating that code to TypeScript and Node. This had the added benefit of clearly separating data from presentation, a line that tends to blur over time in any project. Developers were able to easily compare the old pages and new pages side-by-side as they worked.

When a particular page was complete, we would “launch” it into our staging environment by changing the load balancer configuration so that requests matching that route were forwarded to the Nuxt application. A successful page launch was hopefully imperceptible to visitors, just like the best movie visual effects should be invisible to the audience.

Post launch, we had the very satisfying task of removing old code. At the beginning of the migration process, Nuxt pages were in the minority, so the load balancer rule was something like, “route certain pages to the Nuxt app, everything else to the .NET app.” Once Nuxt routes were the majority, the rule logic was inverted to be something like “route the API and these remaining pages to the .NET app, everything else to the Nuxt app.” In this way, the frontend was gradually and carefully migrated to Nuxt one page at a time.

Additional Choices That Improved the Nuxt Migration Process 

We improved our developer tooling and internal documentation so that it was relatively easy for developers to run both the .NET app and the Nuxt app side-by-side on their own machines.

We also built end-to-end (E2E) test suites for all pages with Playwright to ensure we weren’t missing critical functionality when we migrated a page. “Feature complete” meant that tests had to pass on the old page and the new page. Developers also debugged individual tests on their local machines, which proved to be crucial.

By using continuous integration and deployment (CI/CD), we ensured our automated E2E test suites passed. Other automation tools in the pipeline tested page metrics to make sure we were still hitting our performance and SEO goals. No changes were promoted to staging or QA environments without a peer code review.

Benefits of Migrating from ASP.NET & Vue.js to Nuxt 3 

What were the benefits of this project? For site visitors, there was very little visual change. Page performance is equal to or better than the previous .NET application, but we can’t claim an enormous speedup because the bulk of the heavy lifting is performed by the backend or the .NET middle tier that powers our API. After the initial page load, internal site navigation in the Nuxt app behaves more like an SPA now, which feels “instant” and “snappy.”

The greatest performance boost is developer productivity, in that the Nuxt application is much less verbose and less complicated than the ASP.NET and Vue pairing we had before. Fixing bugs and adding features is simpler for human developers when there are fewer lines of code. We anticipate that AI code agents will be even more effective in this clean Nuxt codebase, as less code results in more logic in the context window, and fewer input and output tokens required to make changes.

When To Use Nuxt 

Are you looking to streamline development while boosting performance and productivity? Curious how Nuxt 3 could benefit your site? Fidelity Solutions can help you decide which technologies are best for your company and goals.

Schedule a free consultation with our software development team today to learn more!