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.

Eine Anleitung von Jonathan Schneider veröffentlicht am 7. Februar 2022, 9:14 Uhr

Vue-Komponenten-Beispiel (Bild: Martin Wolf/Golem.de)

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.