Configuration

Customize Docd through app config, Nuxt config, and content metadata.

Docd configuration is split across three places:

  • app/app.config.ts for Docd-specific UI and GitHub behavior
  • nuxt.config.ts for Nuxt-level options such as site and llms
  • page frontmatter for per-page metadata such as title, description, and seo

Where configuration lives

app/app.config.ts

This is where Docd-specific options live. The layer reads these values from the docd key:

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/your-org/your-repo",
      branch: "main",
      contentDir: "content",
    },
    ui: {
      header: {
        title: "My Docs",
      },
    },
  },
});

nuxt.config.ts

This is where you configure standard Nuxt options that Docd uses as defaults.

ts

nuxt.config.ts

export default defineNuxtConfig({
  extends: ["@baybreezy/docd"],
  site: {
    name: "My Docs",
    url: "https://docs.example.com",
  },
  llms: {
    domain: "https://docs.example.com",
    title: "My Docs",
    description: "Documentation for my project.",
  },
});

Page frontmatter

Per-page values still belong in Markdown frontmatter:

---
title: Configuration
description: Customize Docd through app config, Nuxt config, and content metadata.
navigation:
  icon: lucide:settings
publishedAt: 2026-04-24
modifiedAt: 2026-04-24
seo:
  title: Configuration
  description: Learn which Docd options live in app/app.config.ts, nuxt.config.ts, and page frontmatter.
---

Defaults Docd provides automatically

The layer's config module fills in a few defaults for you.

If you do not provide them explicitly, Docd will try to infer:

  • site.name from nuxt.config.ts, package.json, or Git metadata
  • site.url from site.url in nuxt.config.ts, otherwise from environment variables such as NUXT_SITE_URL
  • seo.titleTemplate, seo.title, and seo.description
  • llms metadata from the detected site name, description, and site URL
  • docd.github defaults from local Git information when available

That means you can start small and override only what you actually need.

docd.github

This config controls GitHub-aware links in the docs UI, especially the Edit this page link shown in the sidebar extras section.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/your-org/your-repo",
      branch: "main",
      contentDir: "content",
    },
  },
});

Fields

KeyTypeDescription
repostringFull repository URL.
branchstringBranch used to build edit links. Defaults to the current branch when detected.
contentDirstringPath to your content directory inside the repository. Defaults to content.

If your docs live in a monorepo, set contentDir to the actual path used by the consuming app.

For example, this docs site uses:

ts

apps/docs/app/app.config.ts

export default defineAppConfig({
  docd: {
    github: {
      repo: "https://github.com/BayBreezy/docd",
      branch: "main",
      contentDir: "docs/content",
    },
  },
});

docd.ui

The ui section controls the main Docd presentation settings.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      header: {
        title: "My Docs",
      },
      toc: {
        title: "On this page",
        icon: "lucide:list",
      },
      borderType: "dashed",
      extraLinks: [],
      transition: {
        name: "fade",
      },
    },
  },
});

ui.header

Use this to control the title and logo displayed in the docs header.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      header: {
        title: "My Docs",
        hideSearch: false,
        logo: {
          light: "/logo-light.svg",
          dark: "/logo-dark.svg",
          alt: "My Docs Logo",
          classes: "h-8 w-auto",
          url: "/",
        },
      },
    },
  },
});

Available logo fields:

KeyTypeDescription
lightstringLogo URL for light mode.
darkstringLogo URL for dark mode.
altstringAlt text for the logo.
classesstringExtra CSS classes for the image.
urlstringDestination when the logo is clicked. Defaults to /.
display"logo" | "wordmark"Which logo variant to render in the header. Defaults to "logo".
faviconstringOptional URL for a custom favicon. Defaults to /favicon.ico.
brandAssetsUrlstringURL to a page or folder containing brand assets.
wordmarkDocLogoWordmarkConfigOptional wordmark configuration.

The header includes a search button, and the search dialog also opens with Cmd+K on macOS or Ctrl+K on Windows and Linux.

To remove the search button from the header, set hideSearch. The keyboard shortcut still opens the dialog:

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      header: {
        hideSearch: true,
      },
    },
  },
});

Searching more than the docs

Search covers the docs collection by default. If your app defines other Nuxt Content collections, for example a blog in your own content.config.ts, list them under docd.search.collections to include their pages:

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    search: {
      collections: ["docs", "blog"],
    },
  },
});

Collections that do not exist in your app are skipped. The sidebar navigation shown in the dialog still comes from the docs collection.

ui.footer

Use this to control what is shown in the sidebar footer area.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      footer: {
        hideThemeCustomizer: false,
        hideLightDarkToggle: false,
      },
    },
  },
});

KeyTypeDescription
hideThemeCustomizerbooleanHides the theme customizer in the sidebar footer. Defaults to false.
hideLightDarkTogglebooleanHides the light/dark mode toggle in the sidebar footer. Defaults to false.

ui.body

Use this to control the width of the page content.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      body: {
        maxWidth: "1100px",
      },
    },
  },
});

KeyTypeDescription
maxWidth`${number}px`Maximum width of the page content. Defaults to "1280px".

ui.expandNav

By default the sidebar collapsibles start closed. Use expandNav to open some or all of them.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      expandNav: [1, 2], // expand the first and second groups
    },
  },
});

Supported values:

  • true expands every group
  • a number expands the group at that 1-based position
  • an array of numbers expands the groups at those positions

ui.toc

This controls the title and icon shown above the page table of contents.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      toc: {
        title: "On this page",
        icon: "lucide:list",
      },
    },
  },
});

ui.borderType

Docd uses decorative borders and rails across several parts of the interface.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      borderType: "solid",
    },
  },
});

Supported values:

  • "dashed"
  • "solid"

These links are rendered in the sidebar’s extra links area alongside the generated Edit this page link.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      extraLinks: [
        {
          icon: "lucide:star",
          label: "Star on GitHub",
          href: "https://github.com/your-org/your-repo",
          external: true,
        },
      ],
    },
  },
});

Each link supports:

KeyTypeDescription
labelstringLink label shown in the UI.
hrefstringInternal or external URL.
iconstringOptional icon name.
externalbooleanOpens the link in a new tab when true.

ui.colorMode

Docd can also set the site color mode through app config.

Setting this value will force the entire site into the specified mode.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      colorMode: "dark", // forces dark mode across the site
    },
  },
});

Supported values:

  • "light"
  • "dark"

ui.transition

This controls page transition behavior for docs navigation.

ts

app/app.config.ts

export default defineAppConfig({
  docd: {
    ui: {
      transition: {
        name: "fade",
        duration: 0.35,
        easing: "easeOut",
      },
    },
  },
});

Supported transition names:

  • fade
  • rightToLeft
  • leftToRight
  • upToDown
  • downToUp
  • rightToLeftWithFade
  • leftToRightWithFade
  • zoom
  • zoomOut
  • cupertino
  • cupertinoDialog
  • none

SEO Configuration

Docd also reads from the top-level seo app config. These are the site-wide defaults for your page titles and descriptions.

ts

app/app.config.ts

export default defineAppConfig({
  seo: {
    titleTemplate: "%s | My Docs",
    title: "My Docs",
    description: "Documentation for my project.",
  },
});

KeyTypeDescription
titleTemplatestringTemplate for every page title. %s is replaced with the page title. Defaults to %s - <site name>.
titlestringFallback title for pages that do not set one. Defaults to the site name.
descriptionstringFallback description for pages that do not set one. Defaults to your package.json description.

If you do not provide these values, Docd will generate sensible defaults from your site name and package metadata. Empty values fall back to those defaults as well.

The template also applies to the error page. These values are editable in Nuxt Studio too.

Per-page SEO overrides still belong in Markdown frontmatter and take priority over the site-wide values:

seo:
  title: Custom Page Title
  description: Custom page description.

site configuration

Docd relies on Nuxt SEO Site Config for canonical URLs and site metadata.

ts

nuxt.config.ts

export default defineNuxtConfig({
  site: {
    name: "My Docs",
    url: "https://docs.example.com",
  },
});

This is especially important for:

  • canonical URLs
  • OG metadata
  • structured data
  • sitemap generation
  • the links inside llms.txt

If you do not set site.url, Docd looks for a URL in environment variables used by common hosts (NUXT_SITE_URL, VERCEL_PROJECT_PRODUCTION_URL, URL, and similar). If it finds none, production builds log a warning, because the sitemap, canonical links, and llms.txt would not point at your real domain.

Sitemap

Docd serves a sitemap at /sitemap.xml and points robots.txt at it. Every page is included with its modifiedAt date as the last modified time.

To keep a page out of the sitemap, set sitemap to false in its frontmatter:

---
title: Private page
sitemap: false
---

llms configuration

Docd already includes nuxt-llms, so you can customize the generated LLM text files in nuxt.config.ts:

ts

nuxt.config.ts

export default defineNuxtConfig({
  llms: {
    domain: "https://docs.example.com",
    title: "My Docs",
    description: "Documentation for my project.",
    full: {
      title: "My Docs",
      description: "Documentation for my project.",
    },
  },
});

domain is optional. If you leave it out, Docd uses your site.url, then the environment variables described above, and finally http://localhost:3000 so that /llms.txt is still generated during local development.

If omitted, the other values are inferred from your site and package metadata.

A practical example

This docs site uses configuration in roughly this shape:

ts

app/app.config.ts

const repoBase = "https://github.com/BayBreezy/docd";

export default defineAppConfig({
  docd: {
    github: {
      repo: repoBase,
      branch: "main",
      contentDir: "docs/content",
    },
    ui: {
      borderType: "dashed",
      header: {
        title: "Docd",
      },
      extraLinks: [
        { icon: "lucide:star", label: "Star on GitHub", href: repoBase, external: true },
      ],
      transition: {
        name: "fade",
      },
    },
  },
});

Rule of thumb

Use:

  • app/app.config.ts for Docd UI behavior
  • nuxt.config.ts for Nuxt/site/LLMs config
  • page frontmatter for page-level metadata

That split keeps configuration predictable and makes it easier to understand where a given behavior comes from.