Customization

Docd is a Nuxt layer, so customization follows normal Nuxt layer precedence. If your app defines a component or layout with the same name as one shipped by the layer, your version wins.

In practice, that means you can start with configuration and CSS variables, then move to component overrides only when you need structural changes.

Start with configuration first

Before overriding components, check whether the change can be handled in:

• app/app.config.ts
• nuxt.config.ts
• your app CSS for colors, spacing, typography, and tokens
• page frontmatter for per-page metadata

Use overrides when you want to replace markup or add custom behavior, not just tweak presentation.

How overrides work

Create the same component in your app that Docd ships internally.

For example, to replace the default logo component:

app/
  components/
    docs/
      DocsLogo.vue

Because your app sits above the layer, Nuxt will use your DocsLogo.vue instead of the one from Docd.

Main layout overrides

The most important structural files in Docd are the two layouts:

• app/layouts/default.vue
• app/layouts/docs.vue

Use default.vue if you want to fully replace the landing page shell or the wrapper used by custom Vue pages.

Use docs.vue if you want to change the docs application frame itself, including:

• the left navigation rail
• the sticky mobile header
• the right-side table of contents area
• the footer controls for GitHub, theme switching, and extras

If you need to radically change the documentation shell, overriding app/layouts/docs.vue is usually cleaner than patching many smaller components.

Prose component overrides

Docd ships custom prose renderers in:

app/components/content/prose/

That includes both standard HTML mappings and higher-level content components, such as:

• ProseA
• ProseStrong
• ProseImg
• ProseCallout
• ProseTabs
• ProseCodeGroup
• ProseSteps
• ProseCard
• ProsePmInstall
• ProsePmRun
• ProsePmX

These are the right override points when you want to change how Markdown itself renders.

For example:

• override ProseA to change link behavior
• override ProseStrong to change strong text styling
• override ProseCallout to change note blocks
• override ProsePmInstall to change package-manager command rendering

Example: replace the logo

app/components/docs/DocsLogo.vue

<template>
  <NuxtLink to="/" class="flex items-center gap-3 py-4">
    <img src="/brand-mark.svg" alt="Docd" class="size-7 rounded-md" />
    <div class="flex flex-col leading-none">
      <span class="text-sm font-bold">Docd</span>
      <span class="text-xs text-muted-foreground">Internal Docs</span>
    </div>
  </NuxtLink>
</template>

Example: customize the page actions

app/components/page/PageHeaderLinks.vue

<template>
  <UiButtonGroup>
    <UiButton to="https://github.com/your-org/your-repo/issues/new" variant="secondary" size="sm">
      Report issue
    </UiButton>
  </UiButtonGroup>
</template>

When to use a custom layout instead

If you are changing:

• both sidebars
• the page container width
• the placement of the mobile header
• the general docs shell

override app/layouts/docs.vue instead of patching several child components. It is easier to maintain and keeps the customization coherent.

Custom icons

Docd registers SVGs from your app's assets/icons/ directory as a custom icon collection.

assets/
  icons/
    my-logo.svg

You can then use them anywhere with the custom: prefix:

---
navigation:
  icon: custom:my-logo
---

Component

<template>
  <Icon name="custom:my-logo" />
</template>