The journey of Vue 3 – Or: How we make our UIs better

For our innovative MarTech solutions in the areas of communication based lead management and digital customer experience, we rely on advanced, comprehensive development tools. We like to rely on freeware and open source software solutions for this. Specifically, when it comes to user interfaces (UI) and front-end development, we use the front-end framework Vue.js. But there’s a journey brewing here that needs to be coped with – the migration from version 2 to the new Vue 3.

Brief facts: In February 2022, the framework developers around founder Evan You decided to only go forward with the more comprehensive, new version Vue 3, which has already been available since last year. A big step, which is rewarded with a stronger developer experience, more functionalities and better performance. But for many users this means a big hurdle – the migration from Vue 2 to version 3 is quite complex. Because: Many frameworks based on the current ‘two’ like Vuetify or Vuex could not yet be migrated completely to Vue 3. This also affects us, since we work with these two frameworks more and more. A problem that will certainly also affect other software developers, agencies or other companies that build their applications in-house, because Vue 3 compatible versions can only be expected in the coming months.

But to all those who are also facing this challenge, let me tell you: even if everything looks insanely difficult and complex in the first moment … the Vue team has outlined a solution that makes the migration a bit easier: Vue version 2.7 has been online since July 1, making some functionality from version 3 available to make the transition much easier and minimize the effort. At its core are features such as the Composition API, Script Setup and improved TypeScript support.

After extensive research and testing, we developed (for ourselves) the following migration plan to successfully switch all of our projects from Vue 2 to Vue 3:

This new version offers us so many advantages to make the final move to version 3, that we will take the opportunity and promptly bring our system to this intermediate 2.7 state.

Why? Quite simple: The functionalities already provided here like Composition API, the Script Setup or the improved TypeScript Support enable us to bring some projects to the level of Vue 3 right now. Additionally, we get the time to prepare for the big update and to align our work with the requirements of the new system asap.

Developers can find a 6-point how-to plan for the migration here: https://blog.vuejs.org/posts/vue-2-7-naruto.html.

We now briefly summarize three of the most important challenges for you – including effort estimates:

Some elements we use in the context of Vue are system extensions like the UI library Vuetify mentioned above. Here we face the problem that many components that are frequently used in our Vue 2 installation are unfortunately not included in the first version compatible for Vue 3 (Vuetify 3). These include table components or date and time pickers, which are only planned for Vuetify 3.1.

This means for us – and all others who need these elements: We continue to work with the Vuetify library version 2 and upgrade only when version 3.1 is available – before that it makes no sense for us. When exactly will that be? We will have to see.

Many frontend projects need a unified and centralized access point to shared data such as user settings, status information or notifications – a kind of connector. Using this application, developers can load the information once, assign it decidedly to each component and manage it centrally. So far, we have relied on Vuex for this. However, this will have to change, as the State Management Library recommends switching to the newer Pinia system as part of the changeover to Vue 3. The advantage: With Pinia, users can manage their data in an even simpler and more modular way than before. In addition, they can store the information in a type-safe manner and provide better auto-completion in the code editor. As a result, everything becomes faster, more consistent and less complicated – the user experience increases and with it the satisfaction of the developers.

And while we’re on the topic of ‘faster, higher, easier’: The point ‘environment testing’ was previously solved in our processes, but not satisfactorily. Vue 3 offers us completely new possibilities here, which we will use in the future – as soon as we have migrated completely to the new system. Because: Until now, we had to rely on the Jest tool with the Vue plugin Vue Test Utils for testing our frontend projects. Unsatisfactory in the long run: who likes to wait up to 15 minutes for a complete test run of a new UI. After the upgrade, we will rely on the Vitest test environment to reduce our test times to less than two minutes.

This article was published in German on the tech platform t3n on 8/27/2022. Read the German article here.