Zum Hauptinhalt springen

Ginko Docs installieren

Füge den Dokumentations-Layer und seine Peer-Abhängigkeit zu einer bestehenden Nuxt-4-Anwendung hinzu.

Ginko Docs ist ein Nuxt-Layer. Installiere ihn in der konsumierenden Anwendung und erweitere nuxt.config.ts um den Layer; du musst seine Seiten, Layouts oder Komponenten nicht in dein Projekt kopieren.

Voraussetzungen

Die wirksamen Anforderungen ergeben sich aus den Paketverträgen von Ginko Docs und Ginko Content:

Laufzeit oder PaketUnterstützter Bereich
Node.js^22.18.0 || ^24.11.0 || >=26.0.0
Nuxt>=4.4.7 <5
Vue^3.5.35
Vue Router^5.1.0
Ginko Content>=0.4.0-rc.1 <0.5.0

Der aktuelle Installationsbefehl pinnt die kleinste kompatible Vorabversion von Ginko Content. Die Anforderungsreferenz enthält die deklarierten Peer-Bereiche und Upgrade-Prüfungen.

Installiere beide Ginko-Pakete mit demselben Befehl, damit der Paketmanager kompatible Versionen erzwingt:

Terminal
pnpm add -D @lupinum/ginko-docs@0.3.0-rc.1 @lupinum/ginko-content@0.4.0-rc.1

Verwende den entsprechenden Befehl für Entwicklungsabhängigkeiten, wenn dein Projekt npm, Yarn oder Bun nutzt.

Layer erweitern

Füge Ginko Docs zum Array extends hinzu:

nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@lupinum/ginko-docs"],
});

Lass weitere Nuxt-Layer im selben Array stehen. Frühere Einträge haben höhere Priorität, und Dateien im konsumierenden Projekt überschreiben alle erweiterten Layer. Setze einen projektspezifischen Theme-Layer deshalb vor Ginko Docs, wenn er die Oberfläche absichtlich ersetzt.

Ginko Content nicht doppelt registrieren
Ginko Docs registriert @lupinum/ginko-content bereits als Nuxt-Modul. Installiere das Peer-Paket, aber füge es nicht erneut zu modules hinzu.

Erforderliche Konfiguration hinzufügen

Ein installierter Layer benötigt weiterhin eine Content-Konfiguration. Erstelle sie im Projektstamm:

content.config.ts
import { defineGinkoDocsConfig } from "@lupinum/ginko-docs/content";

export default defineGinkoDocsConfig({
  site: {
    name: "Acme Docs",
    description: "Documentation for Acme.",
    url: "https://docs.example.com",
  },
  locales: ["en"],
  blog: false,
});

Lege danach die sichtbare Website-Identität in app/app.config.ts fest, wie im Schnellstart gezeigt. Die beiden öffentlichen Konfigurationsdateien haben unterschiedliche Aufgaben: content.config.ts erzeugt Content-Ausgaben, während die App-Konfiguration die gerenderte Website steuert.

Installation bestätigen

Starte Nuxt, nachdem du mindestens eine Datei unter content/docs/ erstellt hast:

Terminal
pnpm dev

Nuxt sollte ohne Warnung über eine fehlende Peer-Abhängigkeit starten. Öffne /docs; Ginko Docs leitet auf die erste erreichbare Seite weiter, statt einen leeren Dokumentationsstamm anzuzeigen.