Installation
Create a new Docd site or install the Docd layer manually.
create-docd
The fastest way to start with Docd is to scaffold a project from the default starter.
Create your project
Run the CLI and choose the target directory:
The CLI initializes a new project from the default Docd starter template.
Start editing content
The starter includes a basic landing page and a sample docs page:
content/
├── index.md
└── getting-started.md
From there, continue by editing content/, updating app/app.config.ts, and extending the app with normal Nuxt files when needed.
What the starter gives you
The default starter is intentionally small. It includes:
nuxt.config.tsextendingdocdapp/app.config.tswith initial UI configurationcontent/index.mdfor the landing pagecontent/getting-started.mdas a first documentation page- Scripts for
dev,build,generate, andpreview
At a minimum, the generated project looks like this:
my-docd-site/
├── app/
│ └── app.config.ts
├── content/
│ ├── index.md
│ └── getting-started.md
├── nuxt.config.ts
└── package.json
Manual installation
If you already have a Nuxt app and want to add Docd manually, install the layer and extend it from your project.
Install dependencies
You also need Nuxt in the project if it is not already installed.
Extend the layer
Add Docd to your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
extends: ["@baybreezy/docd"],
});
Add content
Create a content/ directory and start with at least:
content/
├── index.md
└── getting-started.md
index.md is used as the landing page. Other Markdown files become documentation routes automatically.
Basic configuration
Most project-level customization starts in app/app.config.ts and nuxt.config.ts.
In Nuxt, appConfig lives in the source directory, so this file should be placed at app/app.config.ts.
For example:
app/app.config.ts
export default defineAppConfig({
docd: {
ui: {
header: {
title: "My Docd Site",
},
},
},
});
And in nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
extends: ["@baybreezy/docd"],
site: {
name: "My Docd Site",
},
});
Next steps
Once the project is up & running, the next page to read is the Project Structure page, which gives an overview of the key files and folders in a Docd project and how they work together.