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
Vue-Komponenten-Beispiel
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.

Inhalt:
  1. Das erste Nuxt-3-Projekt: Hello World auf dem Prüfstand
  2. Nuxi erstellt das erste Projekt

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.

JavaScript: Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung
Stellenmarkt
  1. Key User Einkaufssysteme & Materialdisposition (m/w/d)
    DAIKIN Manufacturing Germany GmbH, Güglingen
  2. Assistenz IT/IT-Kaufmann (m/w/d)
    Partnerverbund Pyramide GmbH, Karlsruhe-Grötzingen
Detailsuche

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
Nuxi erstellt das erste Projekt 
  1. 1
  2. 2
  3.  


Zoy 08. Feb 2022

Solange alles schön homogen ist; jeder Entwickler exakt in die selben Frameworks...

wursthandschuh 08. Feb 2022

Das war kein Vorgeschmack auf Nuxt. Das war einfach nur ein HelloWorld in Vue. Dieser...

TheUnichi 07. Feb 2022

Damals, damals, damals haben wir keine Cookies gebraucht für auth111!einself Da hat man...

redmord 07. Feb 2022

Lösungen wie Nuxt sind meist zugunsten einer besonders niedrigen Einstiegsschwelle...



Aktuell auf der Startseite von Golem.de
Cariad
Aufsichtsrat greift bei VWs Softwareentwicklung durch

Die Sorge um die Volkswagen-Softwarefirma Cariad hat den Aufsichtsrat veranlasst, ein überarbeitetes Konzept für die ehrgeizigen Pläne vorzulegen.

Cariad: Aufsichtsrat greift bei VWs Softwareentwicklung durch
Artikel
  1. Überwachung: Polizei setzt Handy-Erkennungskamera gegen Autofahrer ein
    Überwachung
    Polizei setzt Handy-Erkennungskamera gegen Autofahrer ein

    In Rheinland-Pfalz werden Handynutzer am Steuer eines Autos automatisch erkannt. Dazu wird das System Monocam aus den Niederlanden genutzt.

  2. Delfast Top 3.0: Ukrainische Armee setzt E-Motorräder zur Panzerjagd ein
    Delfast Top 3.0
    Ukrainische Armee setzt E-Motorräder zur Panzerjagd ein

    Ukrainische Infanteristen nutzen E-Motorräder, um leise und schnell zum Einsatz zu gelangen und die Panzerabwehrlenkwaffe NLAW zu transportieren.

  3. Kitty Lixo: Nach Sex mit Mitarbeitern Instagram-Account zurückerhalten
    Kitty Lixo
    Nach Sex mit Mitarbeitern Instagram-Account zurückerhalten

    Laut einer Sexdarstellerin muss man nur die richtigen Leute bei Facebook sehr intim kennen, um seinen Instagram-Account immer wieder zurückzubekommen.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Borderlands 3 gratis • CW: Top-Rabatte auf PC-Komponenten • Inno3D RTX 3070 günstig wie nie: 614€ • Ryzen 9 5900X 398€ • Top-Laptops zu Tiefpreisen • Edifier Lautsprecher 129€ • Kingston SSD 2TB günstig wie nie: 129,90€ • Samsung Soundbar + Subwoofer günstig wie nie: 228,52€ [Werbung]
    •  /