An abstract futuristic representation of a digital interface with a glowing symbol in the center against a dark background.

Modernization of Vue applications

How artificial intelligence accelerates the migration from Vue 2 to Vue 3.
BMW Group Logo
DeutscheBahn_logo-2
Creditreform Logo
DERTOUR
jochen-schweizer
Dräger Logo
kuka
BMW Group Logo
DeutscheBahn_logo-2
Creditreform Logo
DERTOUR
jochen-schweizer
Dräger Logo
kuka
ProSieben_Logo_2015-2
Mercedes
Miele Logo
Volkswagen Logo
DEKRA
stihl
Sonax_logo
Weidmüller logo
ProSieben_Logo_2015-2
Mercedes
Miele Logo
Volkswagen Logo
DEKRA
stihl
Sonax_logo
Weidmüller logo
HomeResearch & DevelopmentModernization of VUE applications

An innovative approach

Staying one step ahead of the times often means embracing innovative technologies and approaches. This is exactly what we wanted to achieve with our R&D project: To use a new technology like Generative AI to help developers save time and effort when migrating from Vue 2 projects to Vue 3.

A luminous 3D representation of a brain floats above a modern workplace.

From evaluation to implementation

Our goal was to facilitate the migration of an existing application through the use of artificial intelligence (AI) technology, in particular through the large language model of OpenAI. This approach was evaluated in a pilot project in which we migrated from Vue 2 to Vue 3.

The AI assistant

We started the project by analyzing the source code and understanding the migration rules. Based on this, we introduced an AI wizard that scans the old code file by file and generates new code that not only works in the Vue 3 environment, but is also compatible with the core architectural principles of the framework.

A person works on a laptop while a small, hovering robot stands next to them.

Efficient migration through advance renaming with Python script

During this process, we noticed a significant number of simple renames in the codebase. We decided to use a simple Python script to scan through all the files and do the renaming before sending the files to the AI for further migration. By running the Python script before letting the AI perform the migration, we saved time and got more accurate results. It also reduced the costs that would have been incurred with OpenAI.

Once the AI assistant had completed its tasks for the files to be migrated, we compared the new migrated files with the old ones. This way, we still had the opportunity to decide whether we wanted to accept the changes or not.

The human touch

Despite the impressive capabilities of artificial intelligence, we have found that developers still need to invest some effort in critical areas of the migration task, such as updating packages and refining the core files of an application such as 'main.ts'. In addition, thorough testing of the project after the migration is complete is crucial to ensure that every feature and corner case is checked.

Two people sit outside at a green table in front of a brick wall, concentrating on their laptop while plants decorate the wall.

Lessons for the future

The R&D project was not only a successful assignment, but also provided us with a roadmap for the future. We learned important lessons:

First, that AI can speed up the development process by taking over heavy, repetitive tasks, and second, the importance of investing time in learning new technologies. In addition, the project has shown a promising future for AI-powered solutions, where people will increasingly need to trust AI.

Find what suits you best
Refine your search
clear all filters