Vue 3 Migration: Consulting Firm’s Case Study

In our blog series about migration from Vue 2 to Vue 3 where we asked our experts about when and how to upgrade your Vue application, it’s time to analyze an example of successful migration to Vue 3 — this time, it’s a project that our developer team at Monterail completed for our long-time business partner, Systems Engineering. 

How does the Vue 2 to Vue 3 migration process look in practice? What are the lessons learned for the team? These were the questions that Harald Hersted, Systems Engineering Concept Specialist at Systems Engineering, and Mateusz Michałowski who works as a Principal Frontend Engineer at Monterail, addressed in the latest Vue event we organized in October 2023. Here’s where you’ll find the recording from this live discussion:

You can also check out the highlights from the event below.

If you need guidance when it comes to your own Vue 3 migration project, check out Vue Migration Cheat Sheet created by our team:

Vue 3 Migration for Systems Engineering: a Background Story

Systems Engineering is a Danish company whom Monterail has been collaborating with for the last 4 years. They started as a team of consultants developing and building system engineering projects but over time, they created and then launched an application — we covered the development of this digital product on our website:

Optimizing the web and mobile experience for Systems Engineering

The product is centered around the idea of helping and combining all engineering disciplines together. Using it requires a lot of communication between developer team members where everyone can work together on the same system structure. It’s later visualized in the application using their own specific software, electrical diagrams, 3D drawing tools, etc. Then it’s all merged together in the Systems Engineering app.

As Vue announced in the beginning of 2023 that Vue 2 will reach its End of Life in December of the same year, it was high time for Systems Engineering to plan for the migration process.

Why did Systems Engineering migrate from Vue 2 to Vue 3?

According to Harald, the team decided to start the migration back in June to keep as much of a decision power as possible and have enough time before December 2023 when Vue 2 will stop being further developed and supported. With enough resources from the Monterail side, the team was ready to begin the migration process.

What Were the Technical Limitations to the Migration Process?

Systems Engineering is a large digital product with TypeScript heavily used throughout. Luckily, support for TypeScript is one of the biggest advantages of Vue 3, so the team knew that one aspect will be covered. 

One of the biggest technical limitations - but also an opportunity - was the fact that once the application would be migrated, it would have to use the existing Vue 2 ecosystem exclusively, with its libraries and components. 

Vue 3 also comes with a few updates when it comes to DOM render mechanics, so it can be easily used to enhance the performance of any application. The developers have used Vuetify as well which is an open-source UI Component Framework for Vue and have been lately rewritten to be used with Vue 3. 

Thanks to that, the team could simplify the maintenance process of the application. With Vue 3, the team can also rely on Composition API which allows us to reuse some parts of the code. We could also stop using portals and drop another dependency here — in Vue 3 there’s a native teleport component and that’s very fitting as the Systems Engineering app uses a lot of portals. With the teleport component being used, the team no longer needs to download additional packages which makes bundles smaller in general.

How do these technical differences translate into tangible business benefits for companies adopting Vue 3?

The team at Systems Engineering saw the Vue 2 to Vue 3 migration process as an opportunity to once more review and take back control over every detail in the frontend of the application. This was a very unique chance to fix any smaller or bigger errors, and debug it. This in itself was a big improvement and helped increase the quality of the product.

What Are the Steps of the Vue 3 Migration Process?

The process itself was split into multiple steps to allow the team to progress at the right pace. The list of the migration steps included:

• Estimating the complexity of the product and planning;
• Vue 3 compat build: this mode to help us get rid of compilers and the build time errors;
• Dependencies update to make sure that will work with Vue 3;
• Testing the upgraded version of the app and fixing any bugs.

Thanks to a well-written migration guide prepared by the Vue team, the developers at Monterail and Systems Engineering had no issues following the steps to complete the process. They were able to lay the foundations of a more robust and better performing system.

The migration process started with one of the in-house developers preparing the outline of the transition. What was important for the team was for the migration to not interfere with current development. They achieved that by introducing the incremental migration process and creating two parallel versions of the app with one being replaced by the other once Vue 3 variant was complete and ready to be deployed and used.

The biggest challenge were performance issues in a few components that the team had to investigate. This caused a shift in their approach to developing new components in general as well as to how to handle changes in properties and computed values.

The team also zeroed in on testing as much as possible to make sure that the new system is working efficiently and as planned. 

Practical Advice from Harald and Mateusz

For Harald, the best thing any organization can do is to start the migration process as early as they can. While the Vue 3 ecosystem may still be a work in progress in itself, the most important libraries are there, ready to be used, and so is the support for Vue 3. What he also recommends is to be mindful and open to any changes to your existing technology stack that may influence how it will look in the future. 

What’s also important is the testing process to ensure the quality and performance of business functionalities. The Systems Engineering app is going through a series of manual and automated tests to assess if the team needs to take additional steps in the migration process. The key here was not rushing the whole transition and just incrementally completing the phases. 

Over to You

As mentioned, the migration process from Vue 2 to Vue 3 does not have to be difficult if it’s planned in advance — this was also crucial for the success of the project our team carried out in collaboration with Systems Engineering.

If you’d like to know more about how we approach Vue development in general and what our other projects with this technology are, head over to our website: