Vue 3: Migrating Through Automation

Victor Cuena Garcia is a Senior Software Engineer on GetYourGuide’s Fulfillment team, which works to ensure travelers have the best possible post-booking experiences. Here, Victor shares his insights gained from leading the migration of one of the company's mono repositories to Vue 3.

{{divider}}

GetYourGuide relies on Vue.js with TypeScript as the preferred frontend framework. With Vue 2 approaching its end-of-life at the end of 2023, many teams embarked on the mission to migrate to Vue 3.

At GetYourGuide, coding patterns are commonly shared across teams, for frontend applications, there was a prevalent pattern of utilizing class components, facilitated by the npm package vue-class-component. While this approach served well in the past, it no longer aligns with Vue 3 best practices. To ensure a seamless transition, the company aimed to eliminate the vue-class-component dependency and expedite the adoption of Vue 3-compatible components.

This also involved migrating helper decorators from the npm packages vuex-class and vue-property-decorator to their corresponding counterparts in the options/composition API.

In the following, we will go into some details of how we managed to automate parts of the migration process for the mono repository that represents the frontend of our back office.

‍Efficiency in migration

To achieve a smoother migration experience we opted for transitioning most components from class components to the options API. We introduced "Migration Fridays," during which our team dedicated half of each Friday to migrate our application. 

Recognizing the significant workload involved in manual migration, we sought ways to minimize the manual labor for our teams. We identified common migration patterns, and with the aim of automating these repetitive tasks, we developed a powerful command line interface tool called the "Vue Class Migrator."

Deep dive on the migrator

Leveraging the capabilities of ts-morph, this tool parses Vue and Typescript files, automatically transforming class components into compatible Options API components.

For instance, let's consider the transformation of the "@Prop" decorator:

‍

Expanding the automation with Eslint

In addition to automating the migration of class components, we sought to further streamline the transition to Vue 3 by automating the handling of breaking changes. This was done to provide additional support to our teams through the implementation of ESLint rules. As an illustrative example, we introduced an ESLint rule to automatically refactor code that previously relied on Vue.set.

‍

Before

this.$set(this.person, 'name', "John")

‍

After

this.personObject['name'] = "John"

‍

Collaborating Towards Success

Once we had an MVP version of the Vue Class Migrator in place, the results were nothing short of amazing. We experienced an increase of eight times the migration speed, as the migrator tool handled the bulk of the work. Our engineers only needed to verify that the migrator was performing the transformation correctly, drastically reducing the need for manual intervention.

One aspect that fills me with pride is the collaborative culture at GetYourGuide. If a team identified a missing feature or capability in the migrator tool, they would promptly add it, making it available to the rest of the team. All engineers had to do was pull the latest version of the Command Line Interface tool, and voila, the new feature was supported. This collaborative approach not only accelerated the migration process but also fostered a sense of shared ownership and continuous improvement among our engineers.

Sharing Knowledge and Open Source Contribution

Given the resounding success of our Vue 3 migration project, we wanted to extend our learnings to other teams within GetYourGuide who were also utilizing Vue. We encouraged them to migrate their class components using the strategies and tools we had developed. The adoption of these practices was met with enthusiasm, and we were thrilled to witness the significant reduction in engineering time across the organization.

As a company that values open-source contributions, we believe in giving back to the community. Therefore, we are excited to announce that we are open-sourcing the Vue Class Migrator tool. By sharing our solution with the wider engineering community, we hope to support others in their Vue 3 migration journeys and contribute to the collective advancement of frontend development practices.

Conclusion

In conclusion, our journey of automating the Vue migration process at GetYourGuide has been a remarkable success. By leveraging automation, we significantly reduced the manual effort required and accelerated the adoption of Vue 3. The tooling we’ve introduced in this article was one of many ingredients needed to successfully migrate from Vue 2 to Vue 3 in the wider organization, and we would like to acknowledge all the contributions made by numerous teams that enabled this journey.