Schnellstart

Erstelle eine Nuxt-Dokumentationswebsite, füge eine Markdown-Seite hinzu und öffne ihre öffentliche URL.

Starte mit einem Nuxt-4-Projekt. Diese Anleitung erstellt eine einsprachige Website und rendert deine erste Seite unter /docs/getting-started.

Nuxt-Projekt erstellen

Überspringe diesen Schritt, wenn du bereits eine Nuxt-4-Anwendung hast.

Terminal

pnpm create nuxt@latest my-docs
cd my-docs

Ginko Docs installieren

Installiere den Layer und seine Peer-Abhängigkeit Ginko Content gemeinsam:

Terminal

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

Website-Identität definieren

Halte öffentlichen Namen, Beschreibung und URL in einem kleinen gemeinsamen Modul. Content-Pipeline und Nuxt-App laufen in verschiedenen Kontexten, können aber dieselben Werte importieren.

site.json

{
  "name": "Acme Docs",
  "description": "Documentation for Acme.",
  "url": "http://localhost:3000"
}

Layer erweitern

Füge den Layer zu extends hinzu. Setze dieselbe URL für Nuxt Site Config und Nuxt i18n; der Layer verwendet sie für kanonische Links und Sprachalternativen.

nuxt.config.ts

import site from "./site.json" with { type: "json" };

export default defineNuxtConfig({
  extends: ["@lupinum/ginko-docs"],
  site: { url: site.url },
  i18n: { baseUrl: site.url },
});

Content-Website konfigurieren

Erstelle content.config.ts im Projektstamm. Die Content-Konfiguration definiert Collections, öffentliche Routen, Sprachen, Sitemap-Daten und agentenlesbare Ausgaben.

content.config.ts

import { defineGinkoDocsConfig } from "@lupinum/ginko-docs/content";
import site from "./site.json" with { type: "json" };

export default defineGinkoDocsConfig({
  site,
  locales: ["en"],
  blog: false,
});

Verwende blog: true nur, wenn die Website eine Blog-Collection enthält. Mit blog: false entfernt Ginko Docs die Blog-Routen und den Navigationseintrag.

Übertrage die gemeinsamen Werte in die lokalisierte App-Config-Struktur und ergänze die Logo-Pfade. Eine neue Nuxt-Anwendung enthält bereits public/favicon.ico; deshalb verwendet das Beispiel diese Datei für beide Farbschemata.

app/app.config.ts

import site from "../site.json";

export default defineAppConfig({
  ginkoDocs: {
    site: {
      url: site.url,
      name: { en: site.name },
      description: { en: site.description },
      logo: {
        light: "/favicon.ico",
        dark: "/favicon.ico",
      },
    },
  },
});

Ersetze site.url vor dem Deployment durch den Produktions-Ursprung. Alle vier Konfigurationspfade erhalten nun denselben Wert.

Erste Seite schreiben

Erstelle das Content-Verzeichnis und füge eine Markdown-Datei hinzu. Das Frontmatter liefert den sichtbaren Seitentitel. Beginne den Inhalt deshalb mit einer Einleitung statt mit einer weiteren Überschrift erster Ebene.

content/docs/1.getting-started.md

---
title: Getting started
description: Install Acme and make your first request.
---

Connect your project, then send one request from the development server.

## Connect the project

Add your project identifier to the application configuration.

Das numerische Präfix bestimmt die Reihenfolge und erscheint nicht in der URL.

Website starten

Terminal

pnpm dev

Öffne http://localhost:3000/docs/getting-started. Die Route /docs leitet auf diese Seite weiter, weil sie das erste erreichbare Dokument der Collection ist.