Erste Schritte mit Nuxt.js

Wenn Sie ein Vue-Entwickler sind und produktionsreife Anwendungen mit einem modernen Workflow erstellen möchten, bietet Ihnen Nuxt 4 den schnellsten Weg nach vorne. Nuxt baut auf Vue 3 auf und bietet Server-Side Rendering, hybrides Rendering, dateibasiertes Routing sowie ein einheitliches Deployment-Modell, das über Node, statische Hosts, Serverless- und Edge-Umgebungen hinweg funktioniert.

Dieses anfängerfreundliche Tutorial führt Sie durch die Erstellung Ihrer ersten Nuxt 4-Anwendung unter Verwendung aktueller Standards wie Vue 3, Vite, TypeScript, Composables und Nitro.

Was ist Nuxt 4 und warum sollten Sie es verwenden?

Nuxt 4 ist die aktuelle Major-Version des Nuxt-Frameworks und die empfohlene Wahl für neue Vue-Anwendungen Ende 2025. Es verwendet Vue 3, Vite und die Nitro-Server-Engine, um eine schnelle Entwicklungserfahrung und eine flexible Produktionsarchitektur zu liefern.

Im Gegensatz zu reinen Vue-Apps bietet Nuxt 4 SSR out of the box, verwaltet das Routing automatisch, handhabt das Laden von Daten sowohl im Server- als auch im Client-Kontext und liefert eine vorhersehbare, konventionsbasierte Projektstruktur.

Vue 3 + Vite standardmäßig

Nuxt 4 verwendet Vite für seinen Dev-Server und die Build-Pipeline. Dies ermöglicht nahezu sofortiges Hot Module Replacement, schnelle Kaltstarts und hochoptimierte Output-Bundles.

Die Vue 3 Composition API und das TypeScript-First-Design bieten starke Typinferenz, bessere Code-Organisation und vorhersehbares Komponenten-Verhalten.

TypeScript, ohne Setup erforderlich

TypeScript-Unterstützung ist integriert. Nuxt generiert automatisch Typen basierend auf Ihren Projektverzeichnissen, API-Routen, Middleware und Komponenten. Ihre IDE versteht Ihr gesamtes Projekt ab dem Moment, in dem Sie speichern.

Einrichtung Ihres ersten Nuxt 4-Projekts

Installation mit npm create nuxt@latest

Erstellen Sie ein neues Projekt mit der modernen Nuxt 4 CLI:

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Dies richtet ein Nuxt 4-Projekt mit TypeScript, Vite, Nitro und automatisch importierten Composables ein, das sofort einsatzbereit ist.

Überblick über die Verzeichnisstruktur

Ein frisches Nuxt 4-Projekt enthält:

• pages/ — Dateibasiertes Routing
• components/ — Automatisch importierte Komponenten
• composables/ — Wiederverwendbare Logik mit automatischen Imports
• server/api/ — Server-Endpunkte, unterstützt von Nitro
• public/ — Statische Assets
• nuxt.config.ts — TypeScript-First-Konfiguration

Diese Struktur eliminiert Setup-Overhead und hält alles vorhersehbar.

Kernkonzepte: Pages, Layouts, Composables, Auto-Imports

Dateibasiertes Routing in Nuxt 4

Fügen Sie eine Vue-Datei in pages/ hinzu und Nuxt erstellt automatisch eine Route:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Product {{ id }}</h1>
</template>

Dynamische Routenparameter verwenden eckige Klammern.

Layouts für gemeinsame UI

Layouts ermöglichen gemeinsame Wrapper um Seiten:

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

Seiten verwenden das Standard-Layout automatisch. Sie können Layouts mit definePageMeta wechseln.

Composables und Auto-Imports

Composables innerhalb von composables/ werden überall automatisch importiert:

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

Keine Import-Anweisungen, kein Boilerplate-Code — Nuxt kümmert sich um alles.

Datenabruf in Nuxt 4

useFetch für SSR-fähige Requests

useFetch handhabt serverseitiges Laden von Daten und Client-Hydration:

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

Dies vermeidet doppeltes Abrufen zwischen Server und Client und funktioniert nahtlos mit Nitro.

API-Routen über Nitro

Erstellen Sie Server-Endpunkte in server/api/:

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

Nitro optimiert diese Endpunkte automatisch für Node-, Static-, Serverless- oder Edge-Deployments.

useAsyncData für benutzerdefinierte Logik

Wenn Sie mehr Kontrolle benötigen:

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

State Management mit Pinia

Für anwendungsweiten State verwendet Nuxt 4 Pinia:

npm install @pinia/nuxt

Aktivieren Sie es:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Erstellen Sie einen Store:

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

Pinia integriert sich direkt mit Nuxts Auto-Imports und SSR-Verhalten.

Rendering-Modi in Nuxt 4

Server-Side Rendering standardmäßig

Nuxt 4 rendert Seiten standardmäßig auf dem Server für SEO und Performance. Sie können das Rendering pro Route anpassen:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

Dies ermöglicht hybride Apps, die SSR, vorgerenderte statische Seiten und dynamische Client-Only-Bereiche kombinieren.

Statische Generierung und hybrides Deployment

Generieren Sie bei Bedarf statische Ausgabe:

npm run generate

Sie können Marketing-Seiten vorrendern, Dashboards dynamisch halten und alles über Nitro ausführen.

Deployment Ihrer Nuxt 4-Anwendung

Build für Produktion

npm run build

Nuxt gibt ein .output/-Verzeichnis aus, das Server-Code, Client-Assets und Presets für alle wichtigen Hosting-Plattformen enthält.

Plattformunabhängiges Deployment

Deployment auf:

• Node-Servern
• Statischen Hosts
• Serverless-Plattformen (AWS, Vercel, Netlify)
• Edge-Netzwerken (Cloudflare Workers, Vercel Edge)

Nitro wählt automatisch das richtige Preset aus.

Fazit

Mit Nuxt.js heute zu starten bedeutet, Nuxt 4 zu verwenden.
Mit SSR standardmäßig, hybridem Rendering, Auto-Imports, Composables und Nitro für das Deployment bietet Ihnen Nuxt 4 alles, was Sie brauchen, um schnelle, moderne und wartbare Vue-Anwendungen zu erstellen.

Starten Sie mit:

npm create nuxt@latest

—und Sie haben bereits die richtige Grundlage.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.