Create Docs
Generate a complete, production-ready documentation site for any project.
Workflow
- Analyze - Detect package manager, monorepo structure, read context
- Initialize - Create docs directory with correct setup
- Generate - Write documentation pages using templates
- Configure - Set up AI integration (MCP, llms.txt)
- Finalize - Provide next steps with correct commands
Package Manager Reference
Detect from lock files, default to npm if none found:
| Lock File |
PM |
Install |
Run |
Add |
pnpm-lock.yaml |
pnpm |
pnpm install |
pnpm run |
pnpm add |
package-lock.json |
npm |
npm install |
npm run |
npm install |
yarn.lock |
yarn |
yarn install |
yarn |
yarn add |
bun.lockb |
bun |
bun install |
bun run |
bun add |
Use [pm] as placeholder in commands below.
Step 1: Analyze Project
Detect Project Structure
Check for:
├── pnpm-workspace.yaml → pnpm monorepo
├── turbo.json → Turborepo monorepo
├── lerna.json → Lerna monorepo
├── nx.json → Nx monorepo
├── apps/ → Apps directory (monorepo)
├── packages/ → Packages directory (monorepo)
├── docs/ → Existing docs (avoid overwriting)
├── README.md → Main documentation source
└── src/ or lib/ → Source code location
Determine Docs Location
| Project Type |
Target Directory |
Workspace Entry |
| Standard project |
./docs |
N/A |
Monorepo with apps/ |
./apps/docs |
apps/docs |
Monorepo with packages/ |
./docs |
docs |
Existing docs/ folder |
Ask user or ./documentation |
— |
Read Context Files
| File |
Extract |
README.md |
Project name, description, features, usage examples |
package.json |
Name, description, dependencies, repository URL |
src/ or lib/ |
Exported functions, composables for API docs |
Detect i18n Requirement
Check if project needs multi-language docs:
| Indicator |
Action |
@nuxtjs/i18n in dependencies |
Use i18n template |
locales/ or i18n/ folder exists |
Use i18n template |
| Multiple language README files |
Use i18n template |
| User explicitly mentions multiple languages |
Use i18n template |
| None of the above |
Use default template |
Step 2: Initialize Docs
Create Directory Structure
Default template:
[docs-location]/
├── app/ # Optional: for customization
│ ├── app.config.ts
│ ├── components/
│ ├── layouts/
│ └── pages/
├── content/
│ ├── index.md
│ └── 1.getting-started/
│ ├── .navigation.yml
│ └── 1.introduction.md
├── public/
│ └── favicon.ico
├── package.json
└── .gitignore
i18n template (if multi-language detected):
[docs-location]/
├── app/
│ └── app.config.ts
├── content/
│ ├── en/
│ │ ├── index.md
│ │ └── 1.getting-started/
│ │ ├── .navigation.yml
│ │ └── 1.introduction.md
│ └── fr/ # Or other detected languages
│ ├── index.md
│ └── 1.getting-started/
│ ├── .navigation.yml
│ └── 1.introduction.md
├── nuxt.config.ts # Required for i18n config
├── public/
│ └── favicon.ico
├── package.json
└── .gitignore
Create package.json
Default:
{
"name": "[project-name]-docs",
"private": true,
"scripts": {
"dev": "nuxt dev --extends docus",
"build": "nuxt build --extends docus",
"generate": "nuxt generate --extends docus",
"preview": "nuxt preview --extends docus"
},
"dependencies": {
"docus": "latest",
"better-sqlite3": "^12.5.0",
"nuxt": "^4.2.2"
}
}
i18n (add @nuxtjs/i18n):
{
"name": "[project-name]-docs",
"private": true,
"scripts": {
"dev": "nuxt dev --extends docus",
"build": "nuxt build --extends docus",
"generate": "nuxt generate --extends docus",
"preview": "nuxt preview --extends docus"
},
"dependencies": {
"@nuxtjs/i18n": "^10.2.1",
"docus": "latest",
"better-sqlite3": "^12.5.0",
"nuxt": "^4.2.2"
}
}
Create nuxt.config.ts (i18n only)
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', language: 'en-US', name: 'English' },
{ code: 'fr', language: 'fr-FR', name: 'Français' }
],
defaultLocale: 'en'
}
})
Create .gitignore
node_modules
.nuxt
.output
.data
dist
Update Monorepo Configuration (if applicable)
pnpm Monorepo
- Add docs to workspace and configure
onlyBuiltDependencies (required for better-sqlite3):
packages:
- 'apps/*'
- 'docs'
onlyBuiltDependencies:
- better-sqlite3
- Add dev script to root package.json:
{
"scripts": {
"docs:dev": "pnpm run --filter [docs-package-name] dev"
}
}
Or with directory path:
{
"scripts": {
"docs:dev": "cd docs && pnpm dev"
}
}
npm/yarn Monorepo
{
"workspaces": ["apps/*", "docs"],
"scripts": {
"docs:dev": "npm run dev --workspace=docs"
}
}
Step 3: Generate Documentation
Use templates from references/templates.md.
CRITICAL: MDC Component Naming
All Nuxt UI components in MDC must use the u- prefix:
| Correct |
Wrong |
::u-page-hero |
::page-hero |
::u-page-section |
::page-section |
:::u-page-feature |
:::page-feature |
:::u-button |
:::button |
::::u-page-card |
::::page-card |
Without the u- prefix, Vue will fail to resolve the components.
Documentation Structure
content/
├── index.md # Landing page
├── 1.getting-started/
│ ├── .navigation.yml
│ ├── 1.introduction.md
│ └── 2.installation.md
├── 2.guide/
│ ├── .navigation.yml
│ ├── 1.configuration.md
│ ├── 2.authentication.md
│ └── 3.deployment.md
└── 3.api/ # If applicable
├── .navigation.yml
└── 1.reference.md
Generate Pages
- Landing page (
index.md) - Hero + features grid
- Introduction - What & why, use cases
- Installation - Prerequisites, install commands
- Guide pages - Feature documentation with action-based H2 headings
For writing style, see references/writing-guide.md.
For MDC components, see references/mdc-components.md.
Step 4: Configure AI Integration
Docus automatically includes MCP server (/mcp) and llms.txt generation. No configuration needed.
Do NOT add AI Integration sections to the landing page. These features work automatically.
Optionally mention in the introduction page:
::note
This documentation includes AI integration with MCP server and automatic `llms.txt` generation.
::
Optional: app.config.ts
export default defineAppConfig({
docus: {
name: '[Project Name]',
description: '[Project description]',
url: 'https://[docs-url]',
socials: {
github: '[org]/[repo]'
}
}
})
Optional: Theme Customization
If the project has a design system or brand colors, customize the docs theme.
Custom CSS
Create app/assets/css/main.css:
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Inter', sans-serif;
--ui-container: 90rem;
