Frontend Update auf Vue 3 mit vuetify 3 (mit oder ohne nuxt)

[l3d00m]

Da Vue 2 und vuetify 2 irgendwann mal End of Life sind, sollte auf Vue 3 mit Vuetify 3, Pinia und optional nuxt 3 geupdatet werden. Vue 3 hat ausserdem eine viel bessere DX und ich find's viel uebersichtlicher.

Da ich gerade auch ein anderes Projekt auf vue3 geupgradet habe, kann ich etwas beschreiben, was notwendig ist:

Vuetify 3 migration

https://vuetifyjs.com/en/getting-started/upgrade-guide/

Der Guide ist leider nicht sehr gut und es gibt viele kleine Breaking Changes. Ausserdem sind einige Komponenten wie der Kalender noch nicht in vuetify 3 verfuegbar (wahrscheinlich erst ab Mitte 24), weshalb dass der komplizierteste Teil ist.

Ich kann empfehlen, nochmal eine neue vuetifyt 3 app (mit nuxt?) zu erstellen und dann die Dateien aus dem alten Projekt rueber zu kopieren, da sich die Ordnerstruktur und Aufbau veraendert hat.

Vue 3 migration

https://v3-migration.vuejs.org/

Wird groesstenteils bereits durch die vuetify 3 migration abgedeckt. So viele zusaetzliche Breaking Changes gibt es nicht.

vuex auf pinia migration

https://pinia.vuejs.org/cookbook/migration-vuex.html

Das empfohlene Framework fuer State Managment ist jetzt pinia. Hat eine viel bessere Syntax und ist relativ leicht zu migrieren.

Dazu nutze ich https://github.com/prazdevs/pinia-plugin-persistedstate zum Speichern des States im browser

Nuxt 3 migration

https://nuxt.com/docs/migration/overview

Habe ich nicht gemacht, sondern ich habe Nuxt rausgeschmissen aus meinem Projekt. Koennte man fuer SplusEins auch ueberlegen, weil das Server Side Rendering sehr viel CPU Load auf dem Server erzeugt und es meiner Meinung nach auch reicht, wenn die Seite etwas langsamer im browser rendert. Allerdings hat nuxt auch andere coole Features wie nuxt/proxy, die wir auch nutzen und schwer zu ersetzen sind, deshalb sollte nuxt vielleicht drinbleiben