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

by | Aug 27, 2022

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.

Vue 3: Light at the end of the tunnel

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.

The Vue 3 approach: Little steps, lots of development tools

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:

Update to Vue 2.7 (estimated effort: tolerable to endurable)

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:

How to Vue 3: Almost done, but not quite…

So much for the main migration project, which will take some time and resources. Simultaneously however, there are some resulting other issues that we need to address on the Vue journey.

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

Updating Vue 3 projects to Vuetify 3.1 (estimated effort: painful)

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.

Introduction of Pinia as a state management library (estimated effort: bearable to endurable)

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.

Faster testing with Vitest (estimated effort: with Ibu 400 it’s bearable)

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.

We are sure that many developers in software companies and also in agencies will recognize themselves in these challenges and situations. You don’t always have to reinvent the wheel – especially not yourself. That’s why we want to share our insights with you to make your work easier and less complicated in the future. So: Stay tuned for more… and don’t forget: Sharing is caring!

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

Aug 27, 2022

Andere Beiträge
Related Posts
matelso On-Stage: Our conference program 2023

matelso On-Stage: Our conference program 2023

MarTech from matelso Over the past 15 years, our MarTech company has been known in the market as specialists in Call Tracking and online marketing optimization. During this time, we have generated a lot of insights with our solutions and technologies and have received...

2023 begins for us with a new brand identity

2023 begins for us with a new brand identity

"Simple, clear, smart, partnering and empowering – these are our core values that we will convey with our new brand design in the future." – Frank G. Froux, founder and CEO of matelso.matelso shines with a new brand identityWe are starting 2023 with a new brand...

Two new colleagues for sales and account management

Two new colleagues for sales and account management

Our MarTech company matelso continues to grow – both technologically and in terms of personnel. Since the beginning of November 2022, the new, cloud-based matelso platform for a communication based lead management is online and available for customers. In order to...

Möchten Sie mit uns in das Lead Management von morgen starten?

Überzeugen Sie sich selbst davon, wie die matelso platform for a communication based lead management Plattform Ihr Kundenerlebnis verändern wird.

Do you want to start into the lead management of the future with us?

See for yourself how the matelso platform for a communication based lead management will change your customer experience.

matelso platform

matelso optimally connects telephony, chat, email or contact forms. Our intelligent lead management simplifies communication and enables you to achieve better marketing results.

matelso platform in detail

Call Tracking

MarTech phone call analysis software for companies, agencies & portals.

Call Tracking in detail


What capabilities does our matelso platform offer? All features at a glance.


Do-it-with-me instead of DIY: Work with our consultants to really get the most out of the platform.


Do-it-with-me instead of DIY: Work with our consultants to really get the most out of the platform.



Through our blog, we share knowledge and insights with our readers – always useful, always interesting.

With our matelso webinars, you can experience our MarTech technologies and solutions and get valuable tips for your online marketing.



Creating a new data-based era of communication – if you share this vision, we should get to know each other.

Partner model

Help your customers better understand and manage their customer journey – while also generating a new revenue stream.


About Us

The MarTech company matelso – we stand for innovative and simple solutions that make your marketing more efficient.

News, press releases and more – all news about matelso at a glance.