Wie man ein Projekt mit Nuxt und GitHub startet

Veröffentlicht am 20. Januar 2026

Nuxt ist ein leistungsstarkes Framework für Vue.js, das die Entwicklung von modernen Webanwendungen vereinfacht. In diesem Artikel zeige ich dir, wie du ein neues Nuxt-Projekt startest und es mit GitHub verbindest. Außerdem erkläre ich die wichtigsten Aspekte der Nuxt-Projektstruktur.

1. Nuxt-Projekt erstellen

Zuerst musst du Node.js auf deinem System installiert haben. Dann kannst du ein neues Nuxt-Projekt mit dem folgenden Befehl erstellen:

npx nuxi@latest init my-nuxt-project
cd my-nuxt-project
npm install

Alternativ kannst du auch die offizielle Nuxt-CLI verwenden:

npm create nuxt@latest my-nuxt-project

2. Projektstruktur verstehen

Nach der Erstellung hat dein Nuxt-Projekt folgende grundlegende Struktur:

my-nuxt-project/
├── app/
│   ├── app.vue          # Hauptkomponenten-Datei
│   └── app.config.ts    # App-Konfiguration
├── assets/              # Unkompilierte Assets (CSS, Bilder, etc.)
├── components/          # Vue-Komponenten
├── layouts/             # Layout-Dateien
├── pages/               # Seiten-Dateien (Dateisystem-basiertes Routing)
├── plugins/             # Vue-Plugins
├── public/              # Statische Dateien
├── server/              # Server-seitiger Code
├── utils/               # Hilfsfunktionen
├── nuxt.config.ts       # Nuxt-Konfiguration
├── package.json         # Projektabhängigkeiten
└── tsconfig.json        # TypeScript-Konfiguration

Wichtige Ordner erklärt:

app/

Enthält die Hauptkomponenten. In Nuxt 3 ist app.vue die Root-Komponente deiner Anwendung.

pages/

Hier legst du deine Seiten ab. Jede .vue-Datei wird automatisch zu einer Route. Zum Beispiel wird pages/about.vue zur Route /about.

components/

Vue-Komponenten, die in deinen Seiten wiederverwendet werden können. Diese werden automatisch importiert.

layouts/

Layout-Komponenten, die die Struktur deiner Seiten definieren (z.B. Header, Footer).

assets/

Unkompilierte Assets wie CSS, Bilder oder Fonts. Nuxt verarbeitet diese automatisch.

public/

Statische Dateien, die direkt über die URL erreichbar sind (z.B. robots.txt, Favicons).

3. Erste Seite erstellen

Lass uns eine einfache Seite erstellen. Erstelle die Datei pages/index.vue:

<template>
  <div>
    <h1>Willkommen bei Nuxt!</h1>
    <p>Dies ist deine erste Seite.</p>
  </div>
</template>

<script setup lang="ts">
// Hier kommt deine Logik hin
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

4. Entwicklungsserver starten

Jetzt kannst du den Entwicklungsserver starten:

npm run dev

Deine Anwendung ist nun unter http://localhost:3000 verfügbar.

5. Mit GitHub verbinden

Um dein Projekt mit GitHub zu verbinden, initialisiere zuerst ein Git-Repository:

git init
git add .
git commit -m 'Initial commit'

Erstelle dann ein neues Repository auf GitHub und verbinde es mit deinem lokalen Repository:

git remote add origin https://github.com/username/my-nuxt-project.git
git branch -M main
git push -u origin main

6. Nächste Schritte

Jetzt bist du bereit, mit der Entwicklung zu beginnen! Hier sind einige empfohlene nächste Schritte:

Lerne mehr über Nuxt-Dokumentation
Entdecke die Nuxt-Module für zusätzliche Funktionen
Richte TypeScript vollständig ein für bessere Entwicklungserfahrung
Konfiguriere Tailwind CSS oder ein anderes CSS-Framework

Fazit

Nuxt macht es einfach, moderne Vue.js-Anwendungen zu erstellen. Mit der klaren Projektstruktur und der automatischen Code-Splitting kannst du schnell produktive Anwendungen entwickeln. Die Integration mit GitHub ermöglicht es dir, deine Arbeit zu versionieren und mit anderen zusammenzuarbeiten.