Nuxt3 Beta - Was ist neu bei Nuxt3?

Nuxt 3 Beta ist die neueste Version des Vue-basierten Frameworks. Es enthält einige aufregende neue Funktionen, die die Art und Weise, wie du dein Frontend erstellst, verändern werden.

Was ist Nuxt.js und wozu nutzt man es?

Nuxt.js ist ein Framework, welches auf Vue.js aufbaut. Also alle nicht Techies die jetzt noch hier sind: Husch husch, der Artikel hier ist vermutlich nichts für euch.

Nuxt wird verwendet um Webseiten, SPAs (Single-Page-Applications), PWAs und mehr zu erstellen. Es wird häufig im JAM Stack verwendet. Wir bei cierra arbeiten meistens mit den SPA und PWA Funktionen, da Nuxt dann über einfaches Hosting wie mit S3 Buckets bereitgestellt werden kann und über CDNs einfach verteilt wird ohne besondere Konfigurationen.

Nuxt selbst macht es Entwicklern generell leichter mit Vue.js eben diese Anwendungen zu erstellen. Das schafft es, indem es viele sonst manuelle Aufgaben automatisiert, beispielsweise die Erstellung der Routen: Statt wie in Vue.js manuell die Routen zu definieren und mit Components zu verbinden, kann man mit nuxt.js einfach über die Ordnerstruktur arbeiten.

Auch andere Dinge wie automatischer Import von Components, SSR, Nutzer-Authentifizierung und PWA Funktionen sind direkt mit dabei und müssen lediglich konfiguriert oder selten auch nachinstalliert werden.

Wenn du Nuxt noch nicht kennst, aber mehr wissen willst, findest du hier weitere Details: https://nuxtjs.org/

Nuxt 3 = Vue 3

Um Nuxt 3 zu verstehen, müssen wir zumindest kurz auf Vue 3 eingehen. Vor einigen Monaten erschien das Javascript Framework mit einigen neuen bahnbrechenden Funktionen. Nuxt 3 basiert auf Vue 3 und hat somit alle Vorteile von Vue 3 auch im Angebot.

Ein wichter Punkt voraus: Vue.js 3 unterstützt TypeScript.

Die neue Version von Vue.js sorgt für deutlich kürzere Wartezeiten beim Code-Update auf Entwickler-Geräten und kann Inhalte sowohl auf Server- als auch auf Client-Seite effizienter rendern. Der neue Aufbau des Frameworks kann auch bis zu zweimal schnellere DOM-Updates mit den Components liefern, hat geringere Dateigrößen durch das Entfernen von ungenutztem Code und hat verbesserte Build-Tools, die die Build-Zeit um bis zu 50 % reduzieren,

Auch die Paketgröße hat sich verbessert. Vue 2 war auf der kleineren Seite mit einem gzipped-Gewicht von etwa 20 kB und einer Grundliniengröße von etwa 10 kB schon recht schlank. Vue 3 wiegt nur halb so viel und hat eine nahezu konstante Größe. Wie? Meistens durch das Reduzieren von ungenutztem Code (Tree-Shaking). Wenn du einen Bestandteil nicht benötigst, wird er nicht mitgeliefert.

Unter anderem kam mit Vue 3 auch die Composition API die den React Hooks gleicht. Einfach gesagt ermöglicht es den Entwicklern mit weniger Code weniger komplizierte Funktionen mit gleichem Funktionsumfang zu erstellen. Unserer Meinung nach steht nun im Thema Komfort, technischer Einfachheit und guter Struktur Vue React nicht nur in nichts mehr nach, sondern ist ihm einige Runden im JS-Framework-Rennen voraus. Dazu aber in einem anderen Artikel mehr.

Nuxt 3 Was ist nun genau besser?

Fassen wir mal kurz die Hauptverbesserungen des Frameworks zusammen. Einige ergeben sich natürlich bereits aus den Vorteilen, die Vue.js mit sich bringt. Klar. Aber trotzdem gibt es noch weitere Vorteile, außer dass Nuxt 3 Vue 3 unterstützt:

Vite Support

Vite (https://vitejs.dev/) ist die neue Basis für Vue um z.B. auf Entwickler-Geräten zu laufen oder für Production-Umgebungen Bundles zu erstellen. Die Besonderheit von Vite ist die Performance. Der Dev-Server braucht keine 20 Sekunden mehr für den Start, sondern ist nahezu sofort online. Auch die Updates bei der Entwicklung sind innerhalb von Millisekunden verfügbar, selbst bei großen Codebases.

Neue Server-Runtime

Nuxt3 kommt mit einer neuen Server-Runtime namens "Nitro". Natürlich ist wie immer hier wieder alles schneller und besser, kennen wir ja mittlerweile von Frameworkupdates. Aber diese eine Funktion hat mich besonder begeistert als ich davon erfahren habe: Mit Nitro kann man nun den Server getrennt vom Frontend laufen lassen, wozu man zuvor immer getrennte Repositories erstellen musste mit einem Express.js und einem Nuxt Teil. Ab sofort wird bei Nuxt ein order namens `dist` erstellt, in dem sind die statischen Dateien für das Frontent die überall liegen können. Gesondert gibt es dann den Server der im Dev Environment mit SSR direkt zusammen läuft, aber in Production z.B. über Netlify als Serverless Environment laufen kann. (Hybrid ist zum aktuellen Zeitpunkt noch nicht in der Beta verfügbar)

Die neue Server-Runtime hat nun auch Funktionen wie Middlewares und API Endpoints, was langsam eine ernstzunehmende Konkurrenz für den PHP-Wettbewerber Laravel darstellt. Stellen wir uns mal vor, Nuxt bringt nun auch noch Queue, Caching und Mail support dazu...

ACHTUNG! Beta!

Nuxt 3 ist noch in Beta. Aktuell hat das Framework etwa 120 Bugs auf GitHub reportet: https://github.com/nuxt/framework/issues und noch ist kein Ende zu sehen. Wenn du weißt, was du tust, dein QA-Team eine hohe Frustrationstolleranz hat und du etwas mutig bist kannst du es bereits für Projekte verwenden. So machen wir es zum Beispiel für neue Projekte auch schon, da wir dann später nicht migrieren müssen und der erste Release meistens auch bei neuen Projekten noch nicht so schnell kommen wird. Trotzdem empfehlen wir vor allem Anfängern mit Vue.js nicht mit Nuxt 3 zu arbeiten, da viele Fixes noch selbst gemacht werden müssen.