Modul 8: Nuxt Grundlagen

Was ist Nuxt?

Nuxt ist für Vue, was Rails für Ruby ist — ein vollständiges Framework mit Konventionen, das dir Entscheidungen abnimmt und Produktivität maximiert.

Nuxt = Das Rails für Vue

Wenn du aus der Rails-Welt kommst, kennst du das Gefühl: Du tippst rails new, und alles ist sofort da — Routing, ORM, Mailer, Asset Pipeline, Testing. Du musst nicht 15 Pakete zusammenkleben. Genau das macht Nuxt für Vue.js.

Vue allein ist wie Ruby ohne Rails — eine großartige Sprache, aber du baust dir alles selbst zusammen. Nuxt gibt dir die Struktur, die Konventionen und die Tools, um sofort produktiv zu sein.

🛤️

Die Rails-Analogie

Ruby → Vue.js: Die Sprache / Bibliothek, die alles antreibt.
Rails → Nuxt: Das opinionated Framework mit Konventionen.
Bundler → npm/pnpm: Paketmanager.
Rack → Nitro: Die Server-Engine unter der Haube.

Convention over Configuration

Rails hat dieses Prinzip populär gemacht — und Nuxt übernimmt es konsequent. Dateien an der richtigen Stelle bedeuten automatisches Verhalten:

pages/ → Automatische Routen (wie config/routes.rb + Controller)
components/ → Auto-importierte Komponenten
composables/ → Auto-importierte Composables (wie Concerns/Helpers)
server/api/ → API-Endpunkte (wie Rails API-Controller)
layouts/ → Seitenlayouts (wie application.html.erb)
middleware/ → Route-Guards (wie Rails before_action)

Nuxt-Konvention: Datei = Route

# Rails                          # Nuxt
app/controllers/posts_controller → pages/posts/index.vue
app/views/layouts/application    → layouts/default.vue
app/helpers/                     → composables/
config/routes.rb                 → pages/ (automatisch!)
app/controllers/api/             → server/api/

💡

Kein manuelles Registrieren

In Nuxt musst du Komponenten, Composables und Vue-APIs wie ref() oder computed() nie manuell importieren. Nuxt erkennt sie automatisch. Das ist wie Rails' Autoloading mit Zeitwerk — nur für Frontend-Code.

Was Nuxt zu Vue hinzufügt

Vue selbst bietet Reaktivität, Komponenten und ein Template-System. Nuxt erweitert das um alles, was du für eine echte Anwendung brauchst:

Feature	Vue allein	Mit Nuxt
Routing	Manuell (vue-router)	✅ Dateibasiert, automatisch
Server-Side Rendering	Nicht eingebaut	✅ SSR out of the box
Auto-Imports	Nein	✅ Components, Composables, Vue APIs
API-Server	Nein (externe API nötig)	✅ Nitro Server Engine
SEO / Meta-Tags	Manuell	✅ useHead(), useSeoMeta()
Daten laden	Manuell (fetch/axios)	✅ useFetch(), useAsyncData()
Deployment	Nur SPA	✅ SSR, SSG, SPA, Hybrid

Nuxt 3 — Die aktuelle Generation

Nuxt 3 ist ein kompletter Rewrite. Wie Rails beim Sprung von 4 auf 5 wurde vieles von Grund auf neu gedacht:

Vue 3 & Composition API — Modernes, reaktives JavaScript
TypeScript-first — Volle TS-Unterstützung ohne Konfiguration
Nitro Server Engine — Universeller Server, überall deploybar
Vite — Blitzschneller Dev-Server (kein Webpack mehr)
Hybrid Rendering — SSR, SSG und SPA pro Route mischbar
Nuxt Modules — Ökosystem wie Rails Gems

Terminal

# Neues Nuxt 3 Projekt erstellen
npx nuxi@latest init mein-projekt

# Abhängigkeiten installieren
cd mein-projekt
npm install

# Dev-Server starten (Port 3000)
npm run dev

Die Nitro Server Engine

Nitro ist das Herzstück von Nuxt 3 — vergleichbar mit Puma als Webserver in Rails, aber viel vielseitiger. Nitro ist ein universeller Server, der überall laufen kann:

Node.js — Klassisches Server-Deployment
Serverless — AWS Lambda, Vercel, Netlify
Edge — Cloudflare Workers, Deno Deploy
Statisch — Pre-rendered HTML-Dateien

server/api/hello.ts

// server/api/hello.ts
// Das ist alles! Kein Router, kein Controller-Setup.
// Die Datei IS der Endpunkt: GET /api/hello

export default defineEventHandler(() => {
  return {
    message: 'Hallo von Nitro! 👋',
    timestamp: new Date().toISOString()
  }
})

ℹ️

Warum ist das wichtig?

In Rails bist du an einen Ruby-Server gebunden (Puma, Unicorn). Mit Nitro schreibst du einmal Code und deployest überall — vom klassischen VPS bis zur Edge-Function. Ein nuxt build erzeugt automatisch das richtige Output-Format.

Rails vs. Nuxt — Feature-Vergleich

Hier siehst du, wie Rails-Konzepte auf Nuxt übertragen werden:

Rails	Nuxt
`rails new`	`npx nuxi init`
`config/routes.rb`	`pages/` Verzeichnis
Controller + Views	Vue-Seiten in `pages/`
`application.html.erb`	`layouts/default.vue`
ActiveRecord Models	Prisma / Drizzle ORM
API Controller	`server/api/` Routen
`before_action`	Route Middleware
Concerns / Helpers	Composables
Gems	Nuxt Modules + npm-Pakete
`rails console`	Vue DevTools
`rails server`	`npx nuxi dev`

🛤️

Dein Wissensvorsprung

Als Rails-Entwickler hast du einen großen Vorteil: Du verstehst bereits Convention over Configuration, MVC-Architektur und die Idee von „opinionated Frameworks". Nuxt fühlt sich vertraut an — die Syntax ist anders, aber die Philosophie ist dieselbe.

Dein erstes Nuxt-Projekt

So schnell geht's — in drei Befehlen zum laufenden Projekt:

Terminal

npx nuxi@latest init mein-projekt
cd mein-projekt
npm install
npm run dev
# → http://localhost:3000

Erstelle dann deine erste Seite:

pages/index.vue

<template>
  <div>
    <h1>Willkommen bei Nuxt!</h1>
    <p>Diese Seite wird automatisch zur Route "/" 🎉</p>
  </div>
</template>

💡

Nächster Schritt

Im nächsten Kapitel schauen wir uns die Projekt-Struktur im Detail an und lernen, was jedes Verzeichnis macht — und wie es sich zu Rails verhält.