Das erste Nuxt-3-Projekt: Hello World auf dem Prüfstand
Mit Version 3 von Vue.js ist auch Nuxt 3 erschienen. Der perfekte Zeitpunkt, ein kleines Hello-World-Projekt zu erstellen und dem interaktiven Framework eine Chance zu geben.
Vue.js ist ein interaktives Javascript-Framework, das Webseiten das Feeling einer echten Applikation zu verleihen soll. Es gibt keine harten Seitenreloads, Daten werden dynamisch im Hintergrund geladen und automatisch zwischen Datenmodell und Anzeige ausgeliefert - Ladezeiten zwischen Seiten gibt es nicht mehr, stattdessen dürfen wir uns mit hübschen Animationen zwischen zwei Ansichten austoben, um den Nutzern eine perfekte UI und UX zu präsentieren.
Wofür noch ein weiteres Framework namens Nuxt hinzufügen? Vue.js können wir als Werkzeug verstehen, mit dem wir die interaktiven und dynamischen Komponenten erzeugen, mit denen wir direkt durchstarten können - egal ob wir nur eine einzelne Ansicht erstellen oder ein umfangreiches Projekt angehen möchten.
Bei Letzterem ist es aber oftmals ratsam, nicht einfach in die Komponenten zu stolpern, sondern eine echte Architektur und Logik im Projekt zu verankern, damit weitere Entwickler und vor allem die zukünftige Weiterentwicklung nach einem gewissen Prinzip arbeiten können. Genau hier kommt Nuxt zum Einsatz.
Nuxt ist ein Framework, welches auf Basis von Vue.js entwickelt wurde. Es liefert den Rahmen für Webprojekte und erweitert Vue.js durch ein Struktur-Boilerplate, das hilft, schneller, sauberer und effizienter zu arbeiten. Es stellt ein automatisches Mapping für Routes zur Verfügung, integriert alle Komponenten automatisch, lässt Module und Plugins installieren. Vor allem hilft es, Struktur und den Überblick zu bewahren, um den Code sauber zu halten. Zusammen mit Vue.js 3 ist Nuxt in der dritten Version erschienen.
Wer gerne mit Vue.js arbeitet und ein umfangreiches Projekt vor sich hat, sollte Nuxt 3 direkt ausprobieren.
Was brauchen wir?
Um starten zu können, müssen wir auf unserem Rechner Node.js installieren. Node.js ist erforderlich, um das Nuxt-Projekt zu kompilieren, und bringt gleichzeitig den Package-Manager NPM mit.
Zudem wird ein Code Editor benötigt; wir können Visual Studio Code (VSCode) von Microsoft empfehlen. Hierfür gibt es auch weitere Nuxt-spezifische Erweiterungen, die für eine spätere Entwicklung sehr hilfreich sein können.
Ist alles installiert, können wir direkt durchstarten.
Nuxi erstellt das erste Projekt
Um das erstes Projekt zu erstellen, hilft uns Nuxi - ein kleines Script, welches uns das erste Nuxt-Projekt angelegt. Dafür öffnen wir einfach das Terminal und geben folgenden Befehl ein:
npx nuxi init hello-world
Folgend wird Nuxi ausgeführt und das Projekt in dem Ordner hello-world erstellt. Jetzt wechseln wir mit cd hello-world in den Ordner und führen npm install aus. Alle Abhängigkeiten für das Projekt werden installiert.
Wir haben das erste Nuxt-Projekt erstellt und installiert. Jetzt können wir den Ordner direkt in VSCode öffnen.
Hello World als Komponente
Haben wir alles erfolgreich durchgeführt, sollte die Ansicht wie folgend aussehen:
Dies ist die minimale Konfiguration für ein Nuxt-3-Projekt und beinhaltet eine app.vue-Datei. In dieser Datei wird eine Komponente namens NuxtWelcome ausgeführt. Komponenten sind wiederverwendbare Mini-Anwendungen, die wiederkehrende Ansichten beinhalten. Somit ist es ausreichend, dies einmal als Komponente zu definieren, um es an diversen Stellen im Projekt verwenden zu können.
Jetzt legen wir unsere eigene Hello-World-Komponente an. Dafür erstellen wir einen Ordner mit dem Namen components und eine Datei, die wir HelloWorld.vue nennen. Die Ordnernamen sind ein wichtiges Konzept von Nuxt und bringen Struktur und eine automatische Dependency-Injection mit. Somit müssen wir uns nicht darum kümmern, dass unsere neue Hello-World-Komponente in der Applikation verfügbar ist. Dies erledigt Nuxt mit der reinen Anlage der Datei automatisch. Jetzt fehlt nur noch der Inhalt der HelloWorld.vue Datei:
-
<template>
-
<div>
-
Hello World!
-
</div>
-
</template>
Haben wir unsere Komponente gespeichert, können wir in der app.vue <NuxtWelcome /> einfach mit <HelloWorld /> ersetzen.
Starten wir jetzt mit npm run dev unsere Applikation, werden unsere Arbeitsdateien kompiliert und in lauffähige HTML-, CSS- und Javascript-Dateien übersetzt. Ein lokaler Server präsentiert uns das Ergebnis.
Die Power von Nuxt
Natürlich war dies nur ein Vorgeschmack auf die Möglichkeiten, die uns Nuxt bietet. In der offiziellen Dokumentation sind alle Nuxt-Funktionen zu finden.
Neben Komponenten können auch Seiten, Server oder sogar ganze Layouts über die Ordnerstruktur definiert werden. Dadurch werden lästige Arbeiten wie zum Beispiel das Anlegen von Routes automatisiert und gehören der Vergangenheit an. Wer bereits mit Vue.js allein gearbeitet hat, wird auf Nuxt nicht mehr verzichten wollen. Wer noch nie mit Vue oder Nuxt gearbeitet hat, wird sich auch sehr schnell zurechtfinden und die komfortablen Funktionen von Nuxt genießen.
Unabhängig davon, ob eine kleine Landingpage gebaut werden soll oder ein umfangreiches Portal mit Server Side Rendering und Authentifizierung - Nuxt bietet mit seinen Erweiterungen und Modulen eine große Anzahl an Möglichkeiten, eine Aufgabe zu bewältigen.
Wichtig ist noch zu erwähnen, dass sich Nuxt 3 zum Zeitpunkt der Erstellung des Artikels noch in der Betaphase befand und somit noch nicht für den Produktiveinsatz empfohlen ist. Wer nicht warten möchte, kann sich daher auch gerne Nuxt 2 anschauen. Dieses arbeitet zwar noch mit Vue.js 2 und Webpack 4, ist aber weiterhin ein sehr gutes Werkzeug.
Wir wünschen euch viel Spaß und Erfolg bei eurem ersten Nuxt-Projekt und würden gerne wissen, mit welchen Technologien ihr Web-Applikationen erstellt - schreibt es gerne in die Kommentare!
Jonathan Schneider ist Web-/App-Entwickler und arbeitet seit über zehn Jahren im Bereich Entwicklung und Programmierung, mit der Spezialisierung auf Frontend. Mehr Informationen findest du in seinem Github-Konto
Keine Reaktionen