Editing

Docd is built around Nuxt Content and MDC syntax.

Most editing happens in Markdown files inside content/, with optional components layered in when plain Markdown is not enough.

Where you edit

Content lives in the content/ directory. Files map directly to routes:

content/
├── index.md              →  /
├── getting-started.md    →  /getting-started
└── guide/
    └── configuration.md  →  /guide/configuration

If you use a content/docs/ subfolder, Docd automatically prefixes those routes under /docs:

content/
├── index.md                  →  /
└── docs/
    ├── getting-started.md    →  /docs/getting-started
    └── guide/
        └── configuration.md  →  /docs/guide/configuration

Frontmatter

Docd pages are backed by a content schema, so frontmatter matters.

At minimum, include title and description. Here is an example frontmatter block:

---
title: Editing
description: Learn how to write and organize documentation content with Docd.
navigation:
  icon: lucide:pencil
publishedAt: 2026-04-24
modifiedAt: 2026-04-24
---

Full schema reference:

Writing with Markdown

Plain Markdown is the default authoring experience. For most pages, it is enough:

content/getting-started.md

---
title: Getting Started
description: Learn the basics of this project.
navigation:
  icon: lucide:rocket
publishedAt: 2026-04-24
modifiedAt: 2026-04-24
---

# Getting Started

Docd uses Nuxt Content for file-based documentation.

The landing page

By default, Docd uses content/index.md as the landing page.

If you want a fully custom Vue landing page instead, add app/pages/index.vue. When that file exists, it overrides the Markdown landing page behavior.

Using Components

When Markdown alone is not enough, use components directly in your content files.

Docd ships a set of global prose components for documentation content. A few of them are:

• ::prose-card
• ::prose-callout
• ::prose-tabs
• ::prose-code-group
• ::prose-steps / ::prose-step

These are available out of the box when your app extends the Docd layer.

Props - YAML block

You can pass props to components via a YAML block:

content/index.md

::prose-card
---
title: Starter CLI
description: Bootstrap a new Docd site from the default starter.
icon: lucide:sparkles
---
::

Props - Inline

Alternatively, pass simple props inline as attributes:

Content Index

::prose-card{title="Starter CLI" icon="lucide:sparkles"}
::

Named Slots

content/index.md

::prose-callout
---
variant: info
---
#title
Content-first editing

Write in Markdown first, then use MDC components only where they add value.
::

Package manager commands

Use prose-pm-* components for any install, run, or execute commands so readers can toggle between their preferred package manager:

Appending component API docs

If a page documents a component, use the componentApi frontmatter key to append its props, slots, events, and exposed API at the end of the page.

Single Component

To document a single component, set componentApi to the component's file path:

---
title: Browser Frame
description: A custom Markdown component.
componentApi:
  heading: BrowserFrame API # optional custom heading for the ToC
  path: app/components/content/BrowserFrame.global.vue # required path to the component file
  layout: table # optional layout for the API docs
---

This appends a component API section and injects the heading into the table of contents.

Multiple components

To document multiple components on the same page, set componentApi's components key to an array of component objects:

componentApi:
  heading: Component API
  layout: table
  sections: [props, slots]
  components:
    - path: app/components/content/prose/ProseImg.global.vue
      title: ProseImg
    - path: app/components/content/prose/ProseColorModeImage.global.vue
      title: ProseColorModeImage
      sections: [props]

• heading becomes the parent section in the ToC
• each component title becomes a nested ToC item
• root layout and sections are inherited unless a component overrides them

Using your own components

Components that Nuxt resolves in your app can be used directly in Markdown.

A file at app/components/XBtn.vue will usually work via Nuxt's auto-import without any extra configuration.

When to use Markdown vs Vue

Use Markdown when:

• the page is primarily content
• you want content-driven routing and navigation
• you want search to be generated from files

Use Vue pages when:

• the page is highly interactive
• you need logic-heavy UI that does not belong in content
• the page is not really documentation

For Docd sites, most documentation pages should stay in Markdown. Custom application pages can live in app/pages/.

Practical workflow

1. Start with Markdown in content/
2. Add clean frontmatter first - title, description, dates, navigation icon
3. Use headings and lists before reaching for custom components
4. Introduce components only where layout or richer presentation adds value
5. Keep reusable visual patterns in global prose components instead of repeating custom markup in Markdown