Eine Einführung in Nuxt: Vue auf Steroiden

Nuxt ist ein kostenloses Open-Source-Framework, das die Erstellung von produktionsreifen Fullstack-Webanwendungen mit Vue.js vereinfacht. Das Meta-Framework fungiert dabei als Wrapper für Vue.js, der die Nachteile von Single Page Applications (SPAs) mitigiert und den Funktionsumfang von Vue.js geschickt erweitert.

Zu den Features gehören unter anderem: dateibasiertes Routing mit automatischem Code-Splitting, Prefetching sowie Lazy-loading von Komponenten, eine Server-Runtime und viele weitere Hilfsmittel, um performante und moderne Webanwendungen zu erstellen. Nuxt setzt dabei auf moderne Standards wie ECMAScript-Module (ESM) und native TypeScript-Unterstützung.

Dieser Artikel richtet sich an Webentwickler aller Erfahrungsstufen, die sich einen fundierten Überblick über Nuxt verschaffen möchten. Das Ziel des Beitrags ist nicht, einen Vergleich zwischen verschiedenen Frameworks oder Versionen zu liefern, sondern Nuxt in seinem eigenen Kontext zu erläutern.

Hintergrund: Warum Nuxt?

Wenn Entwickler mit Vue in die Welt der Single-Page-Applications (SPAs) eintauchen, sind sie oft begeistert von der Flexibilität, dem Reaktivitätsmodell und der komponentenbasierten Architektur, die Vue zu bieten hat. Allerdings treten beim Wachstum der Anwendungen zunehmend Probleme von SPAs zutage.

Performanz

Bei SPAs wird ein großer Teil der Webseite in Form eines JavaScript-Bundles an den Client gesendet. Der Browser muss den Code nach dem Herunterladen ausführen, das minimale HTML-Dokument erweitern und die definierten Event-Handler hinzufügen. Dieser Prozess wird auch als „Hydration“ bezeichnet.

Besonders bei größeren Anwendungen oder Benutzern mit begrenzter Bandbreite kann dies zu frustrierend langen Wartezeiten führen, bevor die Anwendung interaktiv wird.

Bei clientseitigem Rendering steht die Anwendung erst nach der Hydration zur Verfügung. Abb.: nuxt.com

SEO

Dieses dynamische Rendering kann zu zusätzlichen Problemen führen. Obwohl Suchmaschinen wie Google Fortschritte bei der Indizierung von JavaScript-gesteuerten Inhalten gemacht haben, besteht immer noch das Risiko, dass Inhalte übersehen oder nicht ausreichend indiziert werden, wenn lediglich das minimale HTML-Dokument vom Crawler verarbeitet wird.

Hier ein minimales HTML-Dokument:

Ebenso ist die Performanz-Metrik First-Input-Delay (FID) bzw. künftig Interaction-To-Next-Paint (INP) ein zentrales Element der Core Web Vitals von Google und hat daher eine wichtige Funktion bei der Bestimmung des Suchmaschinen-Rankings.

Aktueller Trend: Serverseitiges Rendering (SSR)

Daher nutzen aktuelle Meta-Frameworks serverseitiges Rendering, um die genannten SEO- und Performance-Nachteile von SPAs auszugleichen.

Anstatt ein minimales HTML zu senden, rendert ein Server die angeforderte Seite und sendet sie zusammen mit dem JavaScript-Bundle. Dies ermöglicht dem Browser, den Inhalt darzustellen, bevor das JavaScript-Parsing durchgeführt wird.

Standardmäßig verwendet Nuxt eine Art intelligentes SSR, auch Universal-Rendering genannt, und stellt damit sicher, dass Suchmaschinen den Inhalt der Anwendung vollständig lesen können, ohne dabei die Vorteile von clientseitigem Rendering zu verlieren.

Bei SSR wird bereits mit der ersten Serverantwort eine vorgerenderte Version geliefert, die die grundlegende Nutzung der Webseite ermöglicht. Abb.: nuxt.com

Vue Single-File-Components

Die Verwendung von Vue Single File Components (SFCs) unterscheidet sich in Bezug auf die Entwicklung von Nuxt und einer Standard-Vue-Anwendung nicht. Zudem nutzen beide Frameworks dieselbe Entwicklungsumgebung, was einen Wechsel zwischen Vue und Nuxt nahtlos gestaltet.

Vue SFCs in Nuxt:

Konvention vor Konfiguration

Nuxt setzt auf Konventionen und eine klare Verzeichnisstruktur, welche die Automatisierung von wiederkehrenden Aufgaben ermöglicht und das Projekt strukturiert.

Gerade bei umfangreichen Projekten ist dies von Vorteil, da sich Entwickler besser auf neue Features konzentrieren und den Überblick behalten können. Die Konfigurationsdatei kann jedoch weiterhin individuell angepasst werden, um das Standardverhalten zu überschreiben.

Installation und Einrichtung

Mit Hilfe der Nuxt CLI („nuxi“) können Sie mühelos ein neues Projekt erstellen. Die aktuellen Anforderungen finden Sie in der Nuxt Dokumentation. Wenn Sie eine der unterstützten Node-Versionen installiert haben, können Sie mit dem folgenden Befehl ein neues Projekt erstellen:

Die Struktur zeigt die dadurch erstellten Dateien und Verzeichnisse eines minimal Projekts. Dabei sind zwei Dateien besonders interessant.

app.vue

Die “app.vue” Datei ist, wie bei Vue.js, der globale Einstiegspunkt in Ihrer Anwendung.

nuxt.config.ts

Im Wesentlichen gibt die Datei nuxt.config.ts eine Zusammenfassung der Konfiguration Ihrer Anwendung und ist eine zentrale Anlaufstelle, um das Verhalten Ihrer Nuxt-Anwendung anzupassen. In dieser Datei können Sie die Funktionen des Frameworks anpassen oder deaktivieren, wie z.B. automatische Imports, Build- und Server-Konfiguration, Routing und Rendering-Modi. Sie können auch Module hinzufügen und konfigurieren oder zum Beispiel globale SEO-Meta-Tags und CSS-Dateien einfügen.

Im Vergleich zu Vue’s main.ts bietet dieser Ansatz eine höhere Abstraktionsebene mit vielen definierten Standard-Verhaltensweisen, die bei Bedarf überschrieben werden können.

Nuxt Komponenten und Composables

Nuxt ist nicht nur ein hervorragendes Werkzeug zur Implementierung von SSR in Vue. Es beinhaltet auch eine Fülle von integrierten Komponenten und Composables, die Entwicklern bei Aufgaben wie Datenabruf, Fehlerbehandlung, State Management, SEO-Meta-Tags, Routing und vielem mehr unterstützen.

Routing in Nuxt

Ein neu erstelltes Projekt umfasst zunächst nur eine einzige Seite, nämlich den Einstiegspunkt: app.vue. Mit ein paar kleinen Anpassungen lässt sich die Anwendung jedoch um einen clientseitigen Router erweitern.

Nuxt stellt ein dateibasiertes Routing-System bereit, das Routen automatisch innerhalb Ihrer Webanwendung erstellt. Hierzu wird der Vue Router genutzt, der auf folgende Art und Weise zu Ihrem Projekt hinzugefügt werden kann:

Erstellen der Dateien:

Änderungen in der app.vue Datei:

Jede Komponente im pages Verzeichnis wird automatisch einer Route zugewiesen, was die manuelle Konfiguration einzelner Routen überflüssig macht. Für die Konfiguration, die beispielhaft dargestellt wird, erstellt Nuxt automatisch die folgende Vue Router-Konfiguration:

Dynamische Routen

Auch dynamische Routen können mit Nuxt einfach mithilfe einer speziellen Syntax in eine gültige Vue Router-Konfiguration übersetzt werden. Inhalte in eckigen Klammern werden dabei automatisch als dynamische Routenparameter erkannt und behandelt. Es ist sogar möglich, mehrere Parameter sowie statischen Text in Datei- und Verzeichnisnamen zu kombinieren.

In diesem Beispiel können Sie mithilfe dem von Vue Router exponierten useRoute-Composable auf die Parameter innerhalb Ihrer Komponente zugreifen.

Nuxt Link

Die Nuxt-Komponente <NuxtLink> kann jeden Link innerhalb der Anwendung handhaben und ist somit ein direkter Ersatz für die <RouterLink>-Komponente von Vue Router sowie das HTML <a>-Tag. Sie erkennt intelligent, ob es sich um einen internen oder externen Link handelt und rendert diesen entsprechend mit verfügbaren Optimierungen wie Prefetching und Standardattributen.

Nuxt Layouts

Nuxt bietet ein variables Layout-System, das Sie in Ihrer ganzen Anwendung verwenden können. Es ist ideal zum Extrahieren von allgemeinen UI- oder Codemustern in wiederverwendbare Komponenten.

Layouts befinden sich im gleichnamigen Verzeichnis und werden bei Verwendung automatisch über einen asynchronen Import geladen.

Das Layout default.vue wird automatisch zu jeder Seite im pages Verzeichnis hinzugefügt, nachdem es erstellt wurde. Jedes Layout erfordert die Verwendung der Slot-Komponente von Vue, um den Inhalt an der richtigen Stelle im Markup anzuzeigen. Ein einfaches Layout könnte wie folgt aussehen:

Damit die Layouts aktiviert werden, müssen Sie noch die Layout-Komponente in die app.vue hinzufügen.

Die Layouts können beispielsweise mit dem Compiler-Makro definePageMeta einzelnen Seiten zugeordnet werden.

Automatische Imports

Dank des Auto-Import-Features war es nicht erforderlich, die verwendeten Komponenten explizit zu importieren. Gleiches gilt auch für Komponenten, die in den Ordnern components, utils, composables definiert sind, sowie für die gesamte Vue-Reactivity-API (ref, computed, watch, …).

Nuxt macht diese Komponenten global verfügbar und erspart lange Importlisten. Dies hat allerdings keinen Effekt auf das Produktions-Bundle, da mit Hilfe von Tree-Shaking nur die tatsächlich verwendeten Komponenten in das Bundle integriert werden.

Server Engine Nitro

Die Nitro Server Engine wurde ursprünglich für Nuxt 3 entwickelt und später, wie viele andere Komponenten von Nuxt, als separates Paket in die Unified JavaScript Tools (UnJS) ausgelagert. Das UnJS-Ecosystem strebt danach, kleine universelle Bausteine (Primitives) für Autoren von JavaScript-Paketen bereitzustellen.

Nitro ermöglicht die Erstellung von Fullstack-Anwendungen mit Nuxt. Sie können zum Beispiel Informationen aus einer Datenbank oder einem anderen Server abrufen, eine API erstellen oder sogar statische serverseitige Inhalte wie eine Sitemap oder einen RSS-Feed generieren – und all das aus einer einzigen Codebasis heraus. Nitro unterstützt dabei Hot Module Replacement (HMR) und automatische Imports, wie es auch die anderen Teile Ihrer Nuxt-Anwendung tun.

Server API Routen

Nuxt durchsucht automatisch die Dateien in diesen Verzeichnissen, um API- und Server-Handler mit HMR-Unterstützung zu registrieren:

/server/api/
/server/routes/
/server/middleware/

Um eine Server API mittels Nitro innerhalb einer Nuxt-Anwendung zu verwenden, muss lediglich eine Datei angelegt werden.

Innerhalb der hello.ts Datei, wird die defineEventHandler-Methode ebenfalls automatisch importiert und kann direkt txt, json, html oder ein Promise zurückgeben.

Sie können anschließend auf diese API zugreifen, indem Sie beispielsweise das useFetch-Composable auf Ihren Seiten und Komponenten wie folgt verwenden:

Durch die Verwendung des useFetch-Composables wird die API bereits während des SSR-Renderings abgefragt und in den Payload an den Client integriert, sodass dieser die API nicht erneut abfragen muss.

Anbieterunabhängige Deployments

Nitro kann aus derselben Codebasis verschiedene Ausgabeformate erzeugen, die für unterschiedliche Hosting-Provider geeignet sind. Durch die Verwendung der integrierten Voreinstellungen können Sie Nitro einfach konfigurieren, um das Ausgabeformat fast ohne zusätzlichen Code oder Konfiguration anzupassen. Zudem kann eine Nuxt-Anwendung einem Node.js-Server bereitgestellt werden, entweder als statisch gerenderte Seite (SSG) oder auch in Serverless- oder Edge-Umgebungen (ESR).

Hybrides Rendern

Hybrid Rendering erlaubt unterschiedliche Caching-Regeln pro Route mit Hilfe von Route Rules und entscheidet, wie der Server auf eine neue Anfrage für eine bestimmte URL reagieren soll.

Denken Sie zum Beispiel an eine einfache Webseite mit überwiegend statischem Inhalt und einem Administrationsbereich. Jede Seite sollte einmal generiert werden, aber der Administrationsbereich erfordert eine Registrierung und verhält sich eher wie eine dynamische Anwendung.

Modular und erweiterbar

Nuxt integriert Vite für HMR und Produktions-Builds. Der modulare Aufbau des Frameworks erlaubt es jedoch auch, Webpack anstatt Vite als Bundler zu verwenden. Dieses Prinzip zieht sich durch das gesamte Framework und bietet dem Benutzer eine gewisse Freiheit, anstatt eine bestimmte Implementierung aufgezwungen zu bekommen.

Nuxt Module

Das Modulsystem ermöglicht die Erweiterung des Framework-Kerns und vereinfacht Integrationen. Die Module werden vom Nuxt-Team und der Community entwickelt und als npm-Pakete zur Verfügung gestellt.

Ein beliebtes Modul ist der Vue 3 Native Store Pinia (sehen Sie auch Vuex vs. Pinia). Um das Pinia-Modul hinzuzufügen, müssen zunächst die folgenden npm-Pakete installiert werden.

Um das Modul zu registrieren, muss es lediglich in der Nuxt-Konfiguration zum modules-Array hinzugefügt werden.

In der Regel implementieren die Module automatische Imports, kümmern sich um SSR und enthalten Standard-Einstellungen, sodass in den meisten Fällen keine explizite Konfiguration erforderlich ist.

Beim Pinia-Modul wird automatisch nach einem stores-Verzeichnis gesucht. Gefundene Instanzen werden automatisch registriert und stehen somit global zur Verfügung. Das Standardverhalten in der nuxt.config.ts kann überschrieben werden, um beispielsweise stores aus einer anderen Quelle automatisch zu integrieren.

Auf diese Weise können auch alle anderen Module integriert und konfiguriert werden.

Es gibt Hunderte von Modulen. Einige dienen lediglich zur Integration bestimmter Tools wie ESLint, Tailwind CSS oder eben Pinia. Andere erleichtern den Umgang mit Bildern (nuxt-image) oder beinhalten komplette Data-Layer für die Anwendung.

Letzteres ermöglicht das Nuxt-Content Modul, das Markdown-, YAML-, CSV- und JSON-Dateien aus dem Content-Verzeichnis Ihres Projekts verarbeitet, um ein dateibasiertes Content-Management-System für Ihr Projekt zu erstellen. Darüber hinaus können vorgefertigte Komponenten genutzt werden, um Ihre Inhalte anzuzeigen und über eine API ähnlich wie MongoDB abzurufen.

Vue Plugins

Bestehende Vue-Plugins lassen sich ebenfalls in Nuxt einbinden. Dazu durchsucht Nuxt automatisch das plugins-Verzeichnis nach Dateien und lädt diese während der Erstellung Ihrer Vue-Anwendung.

Falls Sie Vue-Plugins wie vue-gtag zur Integration von Google Analytics-Tags verwenden möchten, können Sie ein Nuxt-Plugin wie folgt einsetzen:

Installieren Sie zunächst das gewünschte Plugin:

Erstellen Sie im Anschluss eine Plugin-Datei mit dem Namen plugins/vue-gtag.client.ts mit dem folgenden Inhalt:

Wenn ein Plugin kein SSR unterstützt, weil es beispielsweise auf das Window- oder Document-Objekt zugreift, das nur im Browser vorhanden ist, kann man durch Hinzufügen eines .server oder .client Suffixes im Dateinamen angeben, ob das Plugin nur auf dem Server oder nur auf dem Client ausgeführt werden soll.

Eine Einführung in Nuxt – Fazit

Durch Konventionen, sinnvollen Standards und die Nutzung einer Server-Engine erleichtert Nuxt die Entwicklung produktionsreifer Fullstack-Anwendungen mit Vue. Das Meta-Framework baut auf etablierten Vue-Bibliotheken auf, wodurch die Framework-Entwicklung sowie die Übertragung von domänenspezifischem Wissen erleichtert werden.

Obwohl Vue eine solide Grundlage für die Erstellung von Webanwendungen bietet, geht Nuxt noch einen Schritt weiter. Durch integrierte Rendering-Optionen und SEO-Tools werden gängige Probleme von SPAs behoben. Zudem bietet Nuxt ein breites Spektrum von integrierten Werkzeugen und ein modulares System für einfache Erweiterungen Ihrer Anwendung, ohne auf Variabilität in Bezug auf Hosting verzichten zu müssen.

Die vorherigen Abschnitte bieten lediglich einen oberflächlichen Einblick in Nuxt und decken keineswegs alle Funktionen des Frameworks ab. Um weitere Informationen über die Möglichkeiten und Grenzen zu erhalten, bietet die Dokumentation auf nuxt.com eine hervorragende Ressource.

Titelmotiv: Bild von StockSnap auf Pixabay

Über
Letzte Artikel

Patrik Vogel

Mit mehr als sechs Jahren IT- und Entwicklungserfahrung sowie einem starken Hintergrund in modernen Web-Entwicklungstechnologien ist Patrik Vogel konsequent bestrebt, zuverlässige und intuitive Anwendungen zu erstellen.

Letzte Artikel von Patrik Vogel (Alle anzeigen)