Installation
Install the comark-docs layer from GitHub, extend your Nuxt config, and write your first page.
Prerequisites
- A Nuxt 4 app in a GitHub repository. Production content is read from GitHub, so the repository must exist there (public or private).
- Node.js 20 or later.
Install the layer
comark-docs isn't published to npm yet — install it from GitHub:
pnpm add comark-docs@github:comarkdown/comark-docsnpm install comark-docs@github:comarkdown/comark-docsThis adds a git dependency to your package.json:
package.json
{
"dependencies": {
"comark-docs": "github:comarkdown/comark-docs"
}
}Your package manager pins the resolved commit in the lockfile, so installs are reproducible. Run
pnpm update comark-docs (or the npm equivalent) to move to the latest commit.Extend your Nuxt config
Add the layer with extends and set your site's URL and name:
nuxt.config.ts
export default defineNuxtConfig({
extends: ['comark-docs'],
site: {
url: 'https://docs.example.com',
name: 'My Project',
},
})The layer brings its own modules (Nuxt UI, Comark, SEO, OG images, MCP, and more) — you don't need to install or register anything else.
Write your first pages
Create a content/ directory at the app root. Numeric prefixes order sections and pages; they're stripped from URLs:
content/
├── index.md → /
└── 1.getting-started/
├── .navigation.yml
└── 1.introduction.md → /getting-started/introductioncontent/1.getting-started/1.introduction.md
---
title: Introduction
description: What this project does and why it exists.
---
Welcome to the docs!See Writing pages for the full structure, frontmatter, and navigation conventions.
Run it
Terminal
nuxt devIn development, content is read from your working tree with hot reload. Edit a Markdown file and the page updates immediately.
Diagrams
Mermaid diagrams work out of the box — write a ```mermaid code fence and it renders as a diagram:
Next steps
- Configuration — branding, navigation tabs, and environment variables.
- Deploy on Vercel — production setup with instant content updates.