Vue 3 Migration Case Study: Moving From Vue 2 to Vue 3

Editor’s note: This case study was originally published in 2023, when Monterail migrated Systems Engineering’s web application from Vue 2 to Vue 3. We updated it in October 2026 for clarity and structure. The project details and lessons are unchanged.

In 2023, Monterail’s developers migrated Systems Engineering’s large, TypeScript-heavy web application from Vue 2 to Vue 3. The team started in June, months before Vue 2’s End of Life on December 31, 2023, and worked incrementally: they built the Vue 3 version of the app in parallel with the live one, so feature development never had to stop. The result was a cleaner, faster, easier-to-maintain front end, with a codebase ready for the years ahead.

For years, Monterail has been building dynamic, high-performing web applications with Vue.js across industries. As an official Vue.js partner, we’re often the team organizations call when they need to move from Vue 2 to Vue 3. We started with a Q&A series in which our experts explained when and how to upgrade your Vue application. This article follows up with a real migration we completed for our long-time partner, Systems Engineering. Whether you’re planning your own migration, weighing the benefits, or comparing Vue 3 migration challenges and solutions across companies, you’ll find the challenges we faced, the steps we took, and the lessons we’d pass on.

Why Should Businesses Upgrade From Vue 2 to Vue 3?

Vue 3 is faster and easier to scale and maintain than Vue 2, and since December 31, 2023, it’s the only major version of Vue that still gets updates. Vue 2 no longer receives updates, including security and browser compatibility fixes. For any business whose web applications run on Vue.js, upgrading improves application efficiency and developer productivity. Here’s why businesses and Vue.js consultants recommend the move.

Faster Rendering and Better Runtime Performance

Vue 3 comes with an overhauled rendering engine and enhanced optimization techniques, which deliver faster rendering and better runtime performance. The gains matter most in applications with complex UIs or large-scale user interactions, where they lead to smoother user experiences with less overhead.

The Composition API for Better Code Organization

The Composition API is a new way to write and organize component logic. Vue 2’s Options API splits a component’s code by option type. The Composition API lets developers group related logic together instead, which makes codebases easier to read, maintain, and scale. It’s especially valuable for teams working on large applications and for developers who want to share reusable logic across components.

Stronger TypeScript Support

Vue 3 was rewritten in TypeScript, so it offers better type inference, cleaner typings, and a smoother experience for teams building type-safe applications. As TypeScript adoption keeps growing in web development, that support simplifies workflows and improves developer productivity.

Smaller Bundles and a Proxy-Based Reactivity System

Vue 3’s modular architecture enables smaller bundle sizes, which is a direct performance win wherever load times are critical. Its reactivity system was rebuilt on JavaScript proxies, which makes reactive state more intuitive and efficient to handle. That means fewer pitfalls, easier debugging, and a smoother development experience.

What Do These Changes Mean for the Business?

Migrating to Vue 3 isn’t just about new features. It’s about keeping your technology in step with modern web development so you stay competitive.

Who Is Systems Engineering, and Why Did They Need a Vue 3 Migration?

Systems Engineering is a Danish company that builds a product for combining all engineering disciplines in one shared system structure. By 2023, Monterail had been working with them for four years, and the approaching Vue 2 End of Life made migrating their web application a priority.

The company started as a team of consultants developing and building system engineering projects. Over time, it created and launched its own application. We covered that product’s development in a separate Systems Engineering case study, where Monterail rewrote the company’s Ruby prototype into an enterprise-ready cloud application, with a Vue.js web platform and a React Native mobile app.

Using the product requires a lot of communication between team members, so everyone can work together on the same system structure. That structure is then visualized with discipline-specific software, such as electrical diagrams and 3D drawing tools, and everything is merged together in the Systems Engineering app.

Why Did the Migration Start in June 2023?

Vue 2 reached its End of Life on December 31, 2023, after which it was no longer developed or supported. Systems Engineering turned to Monterail for Vue 3 migration consulting to prepare their application for the future. The team started in June 2023 to keep as much decision-making power as possible and to leave enough time before the December deadline. With enough resources on Monterail’s side, they were ready to begin.

The migration was also a chance to address technical requirements and improve product quality and scalability.

What Technical Challenges Came Up in the Vue 2 to Vue 3 Migration?

Three things shaped the technical work: a large TypeScript codebase, an ecosystem that had to be fully Vue 3-compatible, and Vue 2-era patterns like portals, which Vue 3 replaces natively. Each turned out to be as much an opportunity as a challenge.

A Large, TypeScript-Heavy Product

Systems Engineering is a large digital product that relies heavily on TypeScript. Luckily, TypeScript support is one of Vue 3’s biggest advantages, so the team knew this part of the migration would be covered.

Moving to a Vue 3-Only Ecosystem

One of the biggest technical challenges, and also an opportunity, was that once migrated, the application would have to use the Vue 3 ecosystem exclusively, with its libraries and components. That included Vuetify, an open-source UI component framework for Vue that had recently been rewritten to work with Vue 3. The dependencies had been rewritten specifically for Vue 3 to ensure compatibility. Vue 3 also includes a few updates to DOM render mechanics, which can easily improve any application’s performance.

Replacing Portals With Vue 3’s Native Teleport

The Systems Engineering app uses a lot of portals. Vue 3 has a native Teleport component, which renders part of a component’s template into a DOM node outside that component’s hierarchy. That let the team stop using portals and drop another dependency. With no additional package to download, bundles generally get smaller, and the app relies less on external dependencies.

Reusing Code With the Composition API

With Vue 3, the team could also rely on the Composition API to reuse parts of the code, which simplified application maintenance.

What Business Benefits Did the Vue 3 Migration Deliver?

The migration paid off well beyond compatibility. It gave Systems Engineering a cleaner codebase, a better-performing product, and a front end built to scale. It also gave the team a chance to step back, evaluate the existing codebase, and make improvements that translated directly into business value.

A Rare Chance to Review the Entire Front End

In most products, developers are focused on delivering features under tight deadlines, which can lead to compromises in code quality or the accumulation of technical debt. The migration gave the team a rare opportunity to review every part of the application’s front end. They used it to:

• Identify inconsistencies: They made the codebase more unified and predictable across components.

• Fix long-standing bugs: They tracked down and resolved smaller bugs and errors that had been overlooked or deprioritized in day-to-day development.

• Refactor legacy code: They replaced older, less efficient code patterns with modern approaches enabled by Vue 3, such as the Composition API and the new reactivity system.

Measurable Improvements in Product Quality

By moving to a better-performing framework and following Vue 3 migration best practices, the team delivered:

• Better user experience: Smaller bundles and the optimized rendering engine improved the application’s performance, with faster load times and smoother interactions for end users. This directly affected user satisfaction and retention.

• Future-proof features: The Composition API let the team introduce better-organized, more reusable code, which makes future features and updates easier to add.

Long-Term Business Benefits

Modernizing the front-end architecture positioned the product to stay competitive in a fast-changing tech landscape:

• Scalability: The Composition API allows modular, scalable code that can grow with the product without becoming overly complex. The application can take on more demand or new functionality with minimal effort.

• Developer efficiency: Better TypeScript support and modern syntax made development faster and more reliable, so the team could ship updates more quickly and with more confidence. That sped up feature development and reduced the costs of debugging and technical debt.

• Better tooling and ecosystem integration: Vue 3 aligns with modern web standards and works with cutting-edge tooling, such as Vite for faster builds. That gave the team access to the latest technologies, which improved both their workflows and the product.

How Did the Team Migrate From Vue 2 to Vue 3, Step by Step?

The team split the migration into four steps and ran it incrementally, alongside ongoing development, which let them move quickly. One of the in-house developers prepared the transition outline. The well-written migration guide from the Vue team made it easy for Monterail and Systems Engineering developers to follow the process.

1. Codebase audit: They estimated the product’s complexity and planned the work.

2. Vue 3 compat build: They ran the app on the Vue 3 migration build, which helped them get rid of compiler and build-time errors.

3. Dependencies update: They made sure every dependency would work with Vue 3.

4. Testing & QA: They tested the upgraded version of the app, then fixed any bugs they found.

How Did the Team Avoid Disrupting Ongoing Development?

The team didn’t want the migration to interfere with current development, so they used an incremental migration process with two parallel versions of the app. The Vue 3 version would replace the Vue 2 version once it was complete and ready to be deployed. This approach kept development moving while the team laid the foundations of a more robust, better-performing system.

What Was the Biggest Challenge?

The biggest challenge was investigating performance issues in a few components. That work changed the team’s general approach to developing new components and to handling changes in properties and computed values. The team also tested as much as possible to make sure the new system worked efficiently and as planned.

What Vue 3 Migration Lessons Can Other Teams Apply?

Start early, stay open to change, test thoroughly, and don’t rush. These are the lessons from the Systems Engineering migration that apply to almost any Vue 2 to Vue 3 project:

• Start the migration as early as possible. In 2023, the Vue 3 ecosystem was still a work in progress, but the most important libraries were already there and ready to use, and so was support for Vue 3.

• Be open to changes in your tech stack. Our team also recommends staying mindful of, and open to, any changes to your existing technology stack that may shape how it looks in the future.

• Test to protect business functionality. Testing is how you ensure the quality and performance of business functionalities. At the time of the original publication, the Systems Engineering app was going through a series of manual and automated tests to assess whether the team needed to take additional steps in the migration.

• Go phase by phase. The key was not to rush the transition but to complete the phases one at a time.

• Use the migration to pay down technical debt. Reviewing the whole front end surfaced inconsistencies, bugs, and legacy patterns that everyday feature work had pushed aside.

Is a Vue 3 Migration Worth It for Your Business?

Yes. Migrating from Vue 2 to Vue 3 is far more than a technical exercise. It’s a strategic opportunity to improve your application, streamline development, and future-proof your product. Smaller bundles and faster rendering improve performance, and modern practices like the Composition API and better TypeScript support help teams build more scalable, maintainable, and competitive products.

The Systems Engineering case study shows that a thoughtful approach, with proper planning, thorough code reviews, and incremental updates, makes the transition smooth and creates tangible business value. If your application still runs on Vue 2 today, the deadline has already passed. The question is no longer whether to migrate, but how to do it safely. Partnering with Vue.js consultants helps reduce risk and keeps your application working throughout the process. Whether you’re preparing a migration or considering Vue 3 for a new project, this upgrade isn’t just about keeping up with technology. It’s about building with the future in mind.

What Did Systems Engineering and Monterail Share About the Migration?

How does a Vue 2 to Vue 3 migration look in practice? Why does it matter so much? What did the team learn? Harald Hersted, Systems Engineering Concept Specialist at Systems Engineering, and Mateusz Michałowski, Principal Frontend Engineer at Monterail, answered these questions at a Vue event we organized in October 2023. Here’s the recording of that live discussion.