Quickstart

Create a Nuxt documentation site, add one Markdown page, and open it at its public URL.

Start with a Nuxt 4 project. This guide creates a single-language site and renders your first page at /docs/getting-started.

Create a Nuxt project

Skip this step when you already have a Nuxt 4 app.

Terminal

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

Install Ginko Docs

Install the layer and its Ginko Content peer dependency together:

Terminal

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

Define the site identity

Keep the public name, description, and URL in one small module. The content pipeline and Nuxt app run in different contexts, but they can import the same values.

site.json

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

Extend the layer

Add the layer to extends. Set the same URL for Nuxt Site Config and Nuxt i18n; the layer uses them for canonical and alternate links.

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 },
});

Configure the content site

Create content.config.ts at the project root. The content configuration defines the collections, public route mounts, locales, sitemap data, and agent-readable output.

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,
});

Use blog: true only when the site has a blog collection. With blog: false, Ginko Docs removes the blog routes and navigation entry.

Configure the site shell

Map the shared values to the localized app-config shape and add the logo paths. A fresh Nuxt app already includes public/favicon.ico, so the example uses it for both color modes.

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",
      },
    },
  },
});

Replace site.url with the production origin before deployment. All four consumers now receive the same value.

Write the first page

Create the content directory and add a Markdown file. Frontmatter supplies the visible page title, so the body starts with an introduction instead of another level-one heading.

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.

The numeric prefix controls order and does not appear in the URL.

Start the site

Terminal

pnpm dev

Open http://localhost:3000/docs/getting-started. The bare /docs route redirects to this page because it is the first routable document in the collection.