Nuxt.js

Nuxt.js, häufig kurz Nuxt genannt, erweitert Vue um eine feste Anwendungsstruktur und Funktionen, die Entwickler sonst einzeln konfigurieren müssten. Dazu gehören das Routing zwischen URLs, die Steuerung von Meta-Daten, verschiedene Rendering-Verfahren und serverseitige Schnittstellen. Vue bleibt dabei die Grundlage für Komponenten, Zustände und Interaktionen.

Wie funktioniert Nuxt.js?

Nuxt.js erzeugt Routen anhand der Dateien im Verzeichnis pages. Eine Datei wie pages/produkte.vue wird dadurch zur URL /produkte. Dynamische Dateinamen ermöglichen URLs für Kategorien, Produkte oder redaktionelle Beiträge. Diese Konvention reduziert manuelle Router-Konfigurationen und sorgt für eine nachvollziehbare Verbindung zwischen Projektstruktur und Website-Architektur.

Die Server-Engine Nitro verarbeitet serverseitige Routen, API-Endpunkte und verschiedene Bereitstellungsziele. Eine Anwendung kann auf einem Node.js-Server, in einer Serverless-Umgebung, auf Edge-Infrastruktur oder als vorab erzeugte statische Website bereitgestellt werden. Welche Variante passt, hängt davon ab, wie häufig Inhalte wechseln und ob eine Seite bei jedem Aufruf individuelle Daten benötigt.

Rendering mit Nuxt.js

Hybrides Rendering erlaubt eine getrennte Behandlung einzelner URL-Gruppen. Ein Ratgeber kann statisch erzeugt werden, während Produktpreise oder Verfügbarkeiten bei jeder Anfrage vom Server kommen. Die Auswahl sollte deshalb pro Seitentyp erfolgen und nicht pauschal für die gesamte Domain.

Nuxt.js im CMS- und Shop-Kontext 2026

Nuxt.js ist weder ein Content-Management-System noch ein Shopsystem. Das Framework übernimmt in einem Headless-Aufbau das Frontend, während Inhalte, Produkte, Preise oder Bestellungen aus einem separaten Backend über eine API kommen. Redakteure arbeiten weiterhin im CMS, Händler verwalten ihr Sortiment weiterhin im Commerce-System.

Ein Headless-CMS mit Nuxt.js trennt Inhaltsverwaltung und Darstellung. Ein Beitrag wird im CMS gespeichert, über REST oder GraphQL abgerufen und anschließend durch Nuxt.js als HTML-Seite ausgegeben. Diese Architektur ermöglicht ein individuelles Frontend, verlangt aber klare Prozesse für Vorschauen, Veröffentlichungen, Weiterleitungen und die Aktualisierung zwischengespeicherter Seiten.

Bei einem Headless-Shop verarbeitet das Commerce-Backend Warenkorb, Preise, Kundenkonten und Bestellungen. Nuxt.js stellt Kategorien, Produktseiten und den Kaufprozess dar. Für umfangreiche Sortimente müssen Produktvarianten, Filter-URLs, Canonical-Tags und nicht verfügbare Artikel bereits in der technischen Konzeption berücksichtigt werden. Weitere Anforderungen erklärt die Übersicht zu SEO für Onlineshops.

Warum Nuxt.js für SEO geeignet ist

Nuxt.js kann den vollständigen Hauptinhalt einer Seite bereits in der ersten HTML-Antwort ausliefern. Suchmaschinen müssen dann nicht erst JavaScript ausführen, um Überschriften, Texte und interne Links zu erkennen. Das erleichtert Crawling und Indexierung, garantiert aber weder eine Aufnahme in den Index noch ein bestimmtes Ranking.

Meta-Daten lassen sich in Nuxt.js unter anderem mit useSeoMeta und useHead definieren. Jede indexierbare URL benötigt einen eindeutigen Title, eine passende Meta-Description und bei mehreren URL-Versionen eine konsistente Canonical-Angabe. Dynamische Produkt- oder Beitragsseiten müssen diese Werte aus ihren jeweiligen Datensätzen beziehen.

Der verbreitete Denkfehler lautet, dass Server-Side-Rendering eine Nuxt.js-Seite automatisch suchmaschinenoptimiert macht. Der Server kann auch leere Inhalte, falsche Statuscodes oder widersprüchliche Canonical-Tags ausgeben. Eine nicht gefundene Produktseite darf beispielsweise nicht mit HTTP-Status 200 antworten, wenn fachlich eine 404-Seite vorliegt. Prüfe deshalb immer den ausgelieferten HTML-Code und den tatsächlichen HTTP-Status.

Technische SEO-Prüfung

Messbar ist die technische Qualität einer Nuxt.js-Website durch einen Crawl aller erreichbaren URLs, die Kontrolle der gerenderten HTML-Antworten und die Auswertung der Indexierung. Prüfe dabei insbesondere Statuscodes, Canonicals, robots-Anweisungen, XML-Sitemaps, interne Links und strukturierte Daten. Ein technisches SEO-Audit sollte außerdem vergleichen, ob Browser und Server denselben zentralen Inhalt anzeigen.

Ein kostenloser Check liefert einen ersten Überblick über technische Auffälligkeiten, Meta-Daten und erreichbare Unterseiten:

Analyse starten

Mit Nutzung dieses SEO-Checks erklären Sie, dass Sie die Datenschutzerklärung zur Kenntnis genommen haben und damit einverstanden sind, dass die von Ihnen angegebenen Daten elektronisch erhoben und gespeichert werden. Ihre Daten werden dabei nur streng zweckgebunden zur Bearbeitung des SEO-Checks benutzt. Mit der Nutzung dieses SEO-Checks erklären Sie sich mit der Verarbeitung einverstanden.

🔒

Tageslimit erreicht!

Erstelle dir einen Free Account für die Performance Suite und erhalte trotzdem weitere Daten zu deiner URL.

Direkter Zugriff mit Free Account

SEO-Score: N/A von 100

i Link Power:	Check fehlgeschlagen
i Ladezeiten:	Check fehlgeschlagen
i Technik-Score:	Check fehlgeschlagen
i CMS:
i Gehosted bei:
i WordPress Theme:

Backlinks

i Backlinks: N/A

i Domain Pop: N/A

i Ip Pop: N/A

i Link Power: N/A

i Spam Score: N/A

Ladezeiten

i YSlow: N/A

i Ladezeiten (Desktop): N/A

i Ladezeiten (Mobile): N/A

i PageSpeed (Desktop): N/A

i PageSpeed (Mobile): N/A

i Größe (Desktop): N/A

i Größe (Mobile): N/A

i Elemente (Desktop): N/A

i Elemente (Mobile): N/A

Technik

i 200: N/A

i 2xx: N/A

i 4xx: N/A

i 5xx: N/A

i 301: N/A

i 302: N/A

i Antwortzeit: N/A

i Robots.txt vorhanden: N/A

i Sitemap vorhanden: N/A

Prio SEO-Checks

Sitemap.xmli

Robots.txti

Link Poweri

Spam Scorei

404 Fehleri

503 Fehleri

Ladezeiteni

Antwortzeit des Serversi

Zu kurze Textei

Ladezeiten (Desktop)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Ladezeiten (Mobile)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Technik-Check

Check fehlgeschlagen

✕ Status Codes

✕ Fehler

✕ Übersicht der Checks

Vorhandene Backlinks

Check fehlgeschlagen

▲ Auflistung der Links

	URL	Linktext	LinkPower

Ladezeit und Hydration

Nach der serverseitigen HTML-Ausgabe lädt Nuxt.js das benötigte JavaScript und verbindet es mit der sichtbaren Seite. Dieser Vorgang heißt Hydration. Unterscheiden sich Server-Ausgabe und Browser-Zustand, können Hydration-Fehler entstehen. Typische Ursachen sind zufällige Werte, Zeitangaben oder browserabhängige Bedingungen, die auf Server und Client verschiedene Ergebnisse erzeugen.

Server-Side-Rendering verbessert die Ladezeit nicht automatisch. Große JavaScript-Bundles, unkomprimierte Bilder, Webfonts und Drittanbieter-Skripte können den Largest Contentful Paint und die Reaktionsgeschwindigkeit weiterhin belasten. Prüfe deshalb, welche Komponenten tatsächlich clientseitige Interaktivität benötigen, und lade schwere Funktionen erst bei Bedarf.

Mit dem kostenlosen Ladezeiten-Check lassen sich zentrale Performance-Werte einer veröffentlichten Nuxt.js-Seite untersuchen. Für belastbare Ergebnisse sollten Startseite, Kategorie, Produktseite und redaktioneller Inhalt getrennt getestet werden, da jeder Seitentyp andere Daten und Komponenten lädt.

Nuxt.js, Vue und Next.js

Der Unterschied zwischen Nuxt.js und Vue liegt im Umfang. Vue stellt das Komponentenmodell und die reaktive Benutzeroberfläche bereit. Nuxt.js ergänzt diese Basis um Routing, Rendering, Serverfunktionen, Datenabrufe und Projektkonventionen. Eine kleine eingebettete Oberfläche kann direkt mit Vue umgesetzt werden, während eine vollständige Website meist von der Nuxt.js-Struktur profitiert.

Der Unterschied zwischen Nuxt.js und Next.js liegt vor allem im zugrunde liegenden Frontend-Ökosystem. Nuxt.js basiert auf Vue, Next.js auf React. Beide Frameworks unterstützen serverseitiges, statisches und hybrides Rendering. Die Auswahl sollte sich an vorhandenen Entwicklerkenntnissen, benötigten Integrationen und der langfristigen Wartbarkeit orientieren.

Nuxt.js für GEO und SEA

Für GEO, also Generative Engine Optimization, kann Nuxt.js verständliche HTML-Inhalte, strukturierte Daten und stabile URLs bereitstellen. KI-Systeme erhalten dadurch klar zuordenbare Informationen über Unternehmen, Produkte und Themen. Eine technisch erreichbare Seite erhöht jedoch nicht automatisch die Wahrscheinlichkeit einer Nennung, weil auch Inhaltstiefe, Quellenvertrauen und externe Bestätigung zählen.

Bei SEA beeinflusst Nuxt.js vor allem die Qualität der Landingpage. Schnelle Serverantworten, ein stabiler sichtbarer Seiteninhalt und eine fehlerfreie Weitergabe von Kampagnenparametern unterstützen die Messung von Conversions. Tracking-Skripte und Consent-Logik müssen nach der Navigation weiterhin korrekt ausgelöst werden, besonders wenn Seitenwechsel ohne vollständiges Neuladen stattfinden.

Nuxt.js sauber einführen

Vor der Entwicklung sollten Seitentypen, Datenquellen und Rendering-Verfahren dokumentiert werden. Für jede Vorlage ist festzulegen, wo Title, Canonical, strukturierte Daten, Statuscode und interne Links erzeugt werden. Bei einem Relaunch gehören außerdem bestehende URLs und ihre Weiterleitungen in den technischen Plan. Die SEO-Checkliste für den Website-Relaunch zeigt, welche Kontrollen vor und nach dem Livegang erforderlich sind.

Wenn du ein Nuxt.js-Projekt technisch und inhaltlich bewerten lassen möchtest, kann ein Potenzialcheck die wichtigsten URL-Typen, Rendering-Probleme und SEO-Anforderungen einordnen.

Kostenloser Potenzialcheck

Häufige Fragen zu Nuxt.js