Anzeige
Anzeige
Ratgeber
Artikel merken

Wie Entwickler erfolgreich von Vue 2 auf 3 migrieren

Das Frontend-Framework Vue.js ist sehr beliebt. Aktuell steht hier aber eine Migration von Version 2 auf das neue Vue 3 an. Unser Gastautor erklärt, worauf dabei zu achten ist.

Von Paul Knobloch
3 Min. Lesezeit
Anzeige
Anzeige
Vue.js. (Foto: Shutterstock/Trismegist san)

Kurz die Fakten: Im Februar 2022 wurde von den Framework-Entwicklern um Gründer Evan You beschlossen, künftig nur noch auf die umfangreichere, neue Version Vue 3 zu setzen, die bereits seit dem letzten Jahr erhältlich ist.

Anzeige
Anzeige

Ein großer Schritt, der mit mehr Funktionalitäten, besserer Performance und einer stärkeren Developer-Experience belohnt wird, aber für viele Anwender eine große Hürde bedeutet – die Migration von Vue 2 auf Version 3 gestaltet sich recht aufwendig.

Denn: Viele auf der aktuellen „Zweier“ basierende Frameworks wie Vuetify oder Vuex konnten noch nicht komplett auf Vue 3 migriert werden. Ein Problem, das viele Softwareentwickler, Agenturen oder Unternehmen, die ihre Anwendungen inhouse bauen, betrifft, denn es kann erst in den kommenden Monaten mit einer Vue 3 kompatible Versionen gerechnet werden.

Anzeige
Anzeige

Licht am Ende des Tunnels

Doch zum Glück hat das Vue-Team eine Lösung skizziert, die die Migration etwas leichter gestaltet: Seit dem 1. Juli ist die Vue-Version 2.7 online, die einige Funktionalitäten aus der Version 3 verfügbar macht, um den Übergang deutlich zu erleichtern und den Aufwand zu minimieren.

Im Zentrum stehen Features wie die Composition API, das Script Setup sowie eine verbesserte TypeScript-Unterstützung.

Anzeige
Anzeige

Mit dem folgenden Migrationsplan können Entwickler erfolgreich alle Projekte von Vue 2 auf 3 migrieren:

Update auf Vue 2.7 (geschätzter Aufwand: erträglich bis auszuhalten)

Diese neue Version bietet so viele Vorteile, um den endgültigen Wechsel zur Version 3 zu vollziehen, dass es Sinn ergibt, das System zeitnah auf diesen Zwischenstand 2.7 zu bringen. Warum? Ganz einfach: Die hier bereits zur Verfügung gestellten Funktionalitäten wie Composition API, das Script Setup oder die verbesserte TypeScript-Unterstützung versetzen Entwickler in die Lage, einige Projekte jetzt schon auf Stand von Vue 3 zu bringen.

Anzeige
Anzeige

Zusätzlich bekommen sie die Zeit, sich auf das große Update vorzubereiten und ihre Arbeit jetzt schon auf die Anforderungen des neuen Systems auszurichten.

Einen Sechs-Punkte-How-to-Plan für die Migration finden Entwickler auf dem Blog von Vue.js.

So weit zum Hauptmigrationsprojekt, das einige Zeit und Ressourcen in Anspruch nehmen wird. Parallel dazu gibt es aber einige daraus resultierende weitere Themen, die Entwickler auf dem Schirm haben sollten.

Anzeige
Anzeige

Update der Projekte auf Vuetify 3.1 (geschätzter Aufwand: schmerzhaft)

Einige Elemente, die in Zusammenhang mit Vue eingesetzt werden, sind Systemerweiterungen wie die oben bereits genannte UI-Bibliothek Vuetify.

Hier stehen Entwickler vor dem Problem, dass viele Komponenten, die häufig in der Vue-2-Installation zum Einsatz kommen, leider nicht in der ersten für Vue 3 kompatiblen Version (Vuetify 3) enthalten sind. Dazu zählen etwa Tabellen-Komponenten oder Date- und Timepicker, die erst in Vuetify 3.1 eingeplant sind.

Das heißt konkret: Entwickler arbeiten weiter mit der Vuetify-Library-Version 2 und upgraden erst, wenn Version 3.1 zur Verfügung steht – vorher ergibt es keinen Sinn. Wann das genau sein wird, werden wir sehen müssen.

Anzeige
Anzeige

Einführung von Pinia als State-Management-Bibliothek (geschätzter Aufwand: erträglich bis auszuhalten)

Viele Frontend-Projekte benötigen einen einheitlichen und zentralen Zugriffspunkt auf gemeinsam genutzte Daten wie etwa User-Einstellungen, Status-Informationen oder Benachrichtigungen – eine Art Connector. Über diese Anwendung können Entwickler die Informationen einmalig laden, dezidiert jeder Komponente zuweisen und sie zentral verwalten.

Die State Management Library empfiehlt im Zuge der Umstellung auf Vue 3, auf das neuere System Pinia umzusteigen. Der Vorteil: Mit Pinia können User ihre Daten noch einfacher und modularer verwalten als bisher. Zudem können sie die Informationen typsicher speichern und eine bessere Autovervollständigung im Code-Editor bereitstellen.

Im Ergebnis heißt das: Alles wird schneller, einheitlicher und unkomplizierter – die User-Experience steigt und damit auch die Zufriedenheit der Entwickler.

Anzeige
Anzeige

Schneller testen mit Vitest (geschätzter Aufwand: mit Ibu 400 geht’s)

Und wenn wir schon beim Thema „schneller, höher, einfacher“ sind: Vue 3 bietet für Umgebungstests ganz neue Möglichkeiten.

Bisher mussten Entwickler für das Testen von Frontend-Projekten auf Tools wie Jest mit dem Vue-Plugin Vue Test Utils zurückgreifen. Auf Dauer unbefriedigend: Wer wartet schon gerne bis zu 15 Minuten für einen kompletten Testdurchlauf eines neuen UI?

Nach dem Upgrade soll die Testumgebung Vitest die Testzeiten auf unter zwei Minuten reduzieren.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige