Projekt-Struktur & Auto-Imports
Jedes Verzeichnis in Nuxt hat eine klare Aufgabe — genau wie in Rails. Lerne die Konventionen und spare dir endlose Konfiguration.
Die Verzeichnisstruktur
Ein frisches Nuxt-Projekt hat wenig Dateien. Aber sobald du Verzeichnisse anlegst, aktiviert Nuxt automatisch Features. Das ist Convention over Configuration in Reinform.
Rails-Vergleich: app/ Struktur
In Rails hast du app/controllers/, app/models/, app/views/ — alles an seinem Platz. Nuxt macht dasselbe: pages/ für Routen, components/ für UI-Teile, server/ für Backend-Logik. Der Unterschied: In Nuxt gibt es keine Models im klassischen Sinn — Daten kommen über APIs.
Verzeichnisse im Detail
📁 pages/
Jede .vue-Datei wird automatisch zu einer Route. Das Verzeichnis ersetzt sowohl config/routes.rb als auch die Controller-Logik aus Rails.
📁 components/
Vue-Komponenten hier werden automatisch importiert. Kein import-Statement nötig. Unterordner werden Teil des Komponentennamens.
📁 composables/
Wiederverwendbare Logik — vergleichbar mit Rails Concerns oder Helpers. Funktionen, die mit use beginnen, werden automatisch importiert.
📁 layouts/
Seitenlayouts — wie application.html.erb in Rails. Das Default-Layout umschließt alle Seiten, benannte Layouts können pro Seite gewählt werden.
📁 server/
Dein Backend in Nuxt. Hier laufen API-Routen, Server-Middleware und Utility-Funktionen — alles serverseitig, nie im Browser.
📁 middleware/
Route-Guards, die vor jeder Navigation ausgeführt werden. Wie before_action in Rails-Controllern, aber für clientseitige Navigation.
📁 plugins/
Code, der beim App-Start ausgeführt wird — wie Rails Initializer in config/initializers/. Perfekt für externe Libraries, globale Error-Handler oder Analytics.
📁 assets/ & public/
assets/ — Dateien, die von Vite verarbeitet werden (CSS, Bilder die optimiert werden sollen). Wie app/assets/ in Rails.public/ — Statische Dateien, die 1:1 ausgeliefert werden. Wie public/ in Rails.
Rails vs. Nuxt — Verzeichnis-Mapping
| Rails | Nuxt | Funktion |
|---|---|---|
app/controllers/ | pages/ | Request-Handling + View |
app/views/ | components/ | UI-Bausteine |
app/helpers/ | composables/ | Wiederverwendbare Logik |
app/views/layouts/ | layouts/ | Seitenlayouts |
config/routes.rb | pages/ (automatisch) | Routing |
app/controllers/api/ | server/api/ | API-Endpunkte |
config/initializers/ | plugins/ | Startup-Code |
public/ | public/ | Statische Dateien |
Auto-Imports — Die Magie von Nuxt
Nuxt importiert automatisch drei Kategorien von Code. Du schreibst einfach los — kein import nötig:
1. Vue APIs
2. Komponenten
3. Composables
TypeScript & Auto-Imports
Wenn dein Editor ref oder computed als undefiniert anzeigt, führe npx nuxi prepare aus. Das generiert die Type-Definitionen in .nuxt/, die dein Editor braucht.
nuxt.config.ts — Die Zentrale
Die zentrale Konfigurationsdatei — vergleichbar mit config/application.rb in Rails. Hier aktivierst du Module, setzt globale Einstellungen und konfigurierst Build-Optionen.
Weniger ist mehr
Ein großer Unterschied zu Rails: Die meisten Nuxt-Projekte brauchen kaum Konfiguration. Die Konventionen decken 90% der Fälle ab. Konfiguriere nur, was du wirklich ändern musst.