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:

Stellenmarkt
  1. Software Developer (w/m/d)
    Intrum Hanseatische Inkasso-Treuhand GmbH, Hamburg
  2. Test Analyst / Software Test Engineer (m/w/d)
    GK Software SE, Berlin, Chemnitz, Jena, Schöneck, Sankt Ingbert
Detailsuche

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

Golem Akademie
  1. Jira für Anwender: virtueller Ein-Tages-Workshop
    03.06.2022, virtuell
  2. Kubernetes Dive-in-Workshop: virtueller Drei-Tage-Workshop
    19.-21.07.2022, Virtuell
Weitere IT-Trainings

Haben wir alles erfolgreich durchgeführt, sollte die Ansicht wie folgend aussehen:

  • Visual Studio Code mit dem Beispielprogramm (Screenshot: Jonathan Schneider)
  • Ausgabe des Beispielprogramms im Browser (Screenshot: Jonathan Schneider)
Visual Studio Code mit dem Beispielprogramm (Screenshot: Jonathan Schneider)

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.

JavaScript: Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung

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:

  1. <template>
  2. <div>
  3. Hello World!
  4. </div>
  5. </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.

  • Visual Studio Code mit dem Beispielprogramm (Screenshot: Jonathan Schneider)
  • Ausgabe des Beispielprogramms im Browser (Screenshot: Jonathan Schneider)
Ausgabe des Beispielprogramms im Browser (Screenshot: Jonathan Schneider)

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

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Das erste Nuxt-3-Projekt: Hello World auf dem Prüfstand
  1.  
  2. 1
  3. 2


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
Verkaufsstart des 9-Euro-Tickets
Was Fahrgäste wissen müssen

Das 9-Euro-Ticket für den ÖPNV ist beschlossene Sache, Verkehrsverbünde und -unternehmen sehen sich auf den Verkaufsstart in diesen Tagen gut vorbereitet. Doch es gibt viele offene Fragen.

Verkaufsstart des 9-Euro-Tickets: Was Fahrgäste wissen müssen
Artikel
  1. LG HU915QE: Laserprojektor erzeugt 90-Zoll-Bild aus 5,6 cm Entfernung
    LG HU915QE
    Laserprojektor erzeugt 90-Zoll-Bild aus 5,6 cm Entfernung

    LG hat einen Kurzdistanzprojektor mit Lasertechnik vorgestellt. Der HU915QE erzeugt ein riesiges Bild und steht dabei fast an der Wand.

  2. Urkunden nicht zugestellt: Digitalisierung in Berlin sorgt für Pannen
    Urkunden nicht zugestellt
    Digitalisierung in Berlin sorgt für Pannen

    Eine Panne in der Berliner Innenverwaltung hat dafür gesorgt, dass Hunderte von wichtigen Urkunden nicht übermittelt werden konnten.

  3. Rheinland-Pfalz: Glasfaser soll erneut an Gleisen verlegt werden
    Rheinland-Pfalz
    Glasfaser soll erneut an Gleisen verlegt werden

    Onefiber hat sein erstes großes Projekt. In Rheinland-Pfalz wird parallel zur Glasfaser der Bahn verlegt und teilweise auch neu.

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 • Acer Predator X38S (UWQHD, 175 Hz OC) 1.499€ • MindStar (u. a. AMD Ryzen 7 5700X 268€ und PowerColor RX 6750 XT Red Devil 609€ und RX 6900 XT Red Devil Ultimate 949€) • Alternate (u. a. Cooler Master Caliber R1 159,89€) • SanDisk Portable SSD 1 TB 81€ • Motorola Moto G60s 149€ [Werbung]
    •  /