Configuration
Customize Docd through app config, Nuxt config, and content metadata.
Docd configuration is split across three places:
app/app.config.tsfor Docd-specific UI and GitHub behaviornuxt.config.tsfor Nuxt-level options such assiteandllms- page frontmatter for per-page metadata such as
title,description, andseo
Where configuration lives
app/app.config.ts
This is where Docd-specific options live. The layer reads these values from the docd key:
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.
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.namefromnuxt.config.ts,package.json, or Git metadatasite.urlfromsite.urlinnuxt.config.ts, otherwise from environment variables such asNUXT_SITE_URLseo.titleTemplate,seo.title, andseo.descriptionllmsmetadata from the detected site name, description, and site URLdocd.githubdefaults 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.
app/app.config.ts
export default defineAppConfig({
docd: {
github: {
repo: "https://github.com/your-org/your-repo",
branch: "main",
contentDir: "content",
},
},
});
Fields
| Key | Type | Description |
|---|---|---|
repo | string | Full repository URL. |
branch | string | Branch used to build edit links. Defaults to the current branch when detected. |
contentDir | string | Path 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:
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.
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.
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:
| Key | Type | Description |
|---|---|---|
light | string | Logo URL for light mode. |
dark | string | Logo URL for dark mode. |
alt | string | Alt text for the logo. |
classes | string | Extra CSS classes for the image. |
url | string | Destination when the logo is clicked. Defaults to /. |
display | "logo" | "wordmark" | Which logo variant to render in the header. Defaults to "logo". |
favicon | string | Optional URL for a custom favicon. Defaults to /favicon.ico. |
brandAssetsUrl | string | URL to a page or folder containing brand assets. |
wordmark | DocLogoWordmarkConfig | Optional wordmark configuration. |
Search
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:
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:
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.
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
footer: {
hideThemeCustomizer: false,
hideLightDarkToggle: false,
},
},
},
});
| Key | Type | Description |
|---|---|---|
hideThemeCustomizer | boolean | Hides the theme customizer in the sidebar footer. Defaults to false. |
hideLightDarkToggle | boolean | Hides the light/dark mode toggle in the sidebar footer. Defaults to false. |
ui.body
Use this to control the width of the page content.
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
body: {
maxWidth: "1100px",
},
},
},
});
| Key | Type | Description |
|---|---|---|
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.
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
expandNav: [1, 2], // expand the first and second groups
},
},
});
Supported values:
trueexpands 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.
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.
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
borderType: "solid",
},
},
});
Supported values:
"dashed""solid"
ui.extraLinks
These links are rendered in the sidebar’s extra links area alongside the generated Edit this page link.
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:
| Key | Type | Description |
|---|---|---|
label | string | Link label shown in the UI. |
href | string | Internal or external URL. |
icon | string | Optional icon name. |
external | boolean | Opens 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.
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.
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
transition: {
name: "fade",
duration: 0.35,
easing: "easeOut",
},
},
},
});
Supported transition names:
faderightToLeftleftToRightupToDowndownToUprightToLeftWithFadeleftToRightWithFadezoomzoomOutcupertinocupertinoDialognone
SEO Configuration
Docd also reads from the top-level seo app config. These are the site-wide defaults for your page titles and descriptions.
app/app.config.ts
export default defineAppConfig({
seo: {
titleTemplate: "%s | My Docs",
title: "My Docs",
description: "Documentation for my project.",
},
});
| Key | Type | Description |
|---|---|---|
titleTemplate | string | Template for every page title. %s is replaced with the page title. Defaults to %s - <site name>. |
title | string | Fallback title for pages that do not set one. Defaults to the site name. |
description | string | Fallback 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.
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:
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:
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.tsfor Docd UI behaviornuxt.config.tsfor 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.