Configure your documentation site
App configuration
SEO
Global configuration
Define default SEO metadata in app/app.config.ts.
site.name can be configured in nuxt.config.ts; its default value comes from the name field in package.json.
export default defineAppConfig({
seo: {
// Defaults to `%s - ${site.name}`
titleTemplate: '',
// Defaults to the name field in package.json
title: '',
// Defaults to the description field in package.json
description: '',
},
})
export default defineNuxtConfig({
site: {
name: 'Movk Nuxt Docs',
},
})
Per-page configuration
Define SEO metadata in the front-matter of a Markdown file:
---
seo:
title: 'Configuration'
description: 'Customize your documentation through the Nuxt app config file.'
---
<!-- Page content -->
Header
export default defineAppConfig({
header: {
title: '', // Title
avatar: '', // Avatar URL
to: '/', // Title link
search: true, // Show the search bar
colorMode: true, // Show the color mode switcher
links: ButtonProps[], // Header link buttons
},
})
Footer
export default defineAppConfig({
footer: {
// Credits
credits: `Copyright © 2024 - ${new Date().getFullYear()} YiXuan - <span class="text-highlighted">MIT License</span>`,
// Footer social media icon links
socials: [
{
icon: 'i-lucide-brain',
to: 'https://docs.mhaibaraai.cn/llms.txt',
target: '_blank',
label: 'Open LLMs',
},
],
},
})
TOC
You can customize the table of contents shown on the right side of each page.
export default defineAppConfig({
toc: {
// Customize the TOC title
title: 'On this page',
// Add a section at the bottom of the TOC
bottom: {
title: 'Community',
links: [{
icon: 'i-lucide-book-open',
label: 'Nuxt UI docs',
to: 'https://ui.nuxt.com/getting-started/installation/nuxt',
target: '_blank',
}],
},
},
})
Aside
Enable a filter box for the left navigation to quickly locate items in documentation sections with many entries. The filter box is off by default. Once enabled, it only appears when the total number of navigation items in the current group reaches threshold, and it is pinned to the top of the sidebar (staying visible as the navigation scrolls). Filtering matches against each navigation item's title and description, and it clears automatically when you switch pages.
export default defineAppConfig({
aside: {
filter: {
// Enable the navigation filter box
enabled: true,
// Filter box placeholder text
placeholder: 'Filter navigation...',
// Only show the filter box when the total number of navigation items reaches this value
threshold: 10,
// Keyboard shortcut to focus the filter box; leave empty to disable
shortcut: '/',
},
},
})
Configuration properties:
| Property | Type | Default | Description |
|---|---|---|---|
filter.enabled | boolean | false | Whether to show the navigation filter box at the top of the sidebar |
filter.placeholder | string | 'Filter navigation...' | Placeholder text for the filter box |
filter.threshold | number | 10 | Only show the filter box when the total number of navigation items in the current group reaches this value |
filter.shortcut | string | '/' | Keyboard shortcut to focus the filter box; leave empty to disable |
Layer feature toggles (movkNuxtDocs)
Movk Nuxt Docs provides a movkNuxtDocs configuration group in nuxt.config.ts to control optional feature modules.
export default defineNuxtConfig({
movkNuxtDocs: {
a11y: true,
mermaid: false
},
})
| Option | Default | Description |
|---|---|---|
a11y | true | Whether to enable @nuxt/a11y accessibility support. |
mermaid | false | Whether to enable Mermaid diagram rendering (requires installing mermaid and dompurify). |
GitHub integration
Uses git-url-parse to automatically retrieve repository information, providing the following features:
- GitHub icon links in the header and footer
- "Edit on GitHub" and "Report an issue" links at the bottom of the TOC
- Commit history for the
CommitChangelogcomponent
Basic configuration
Configure GitHub integration in app/app.config.ts:
export default defineAppConfig({
github: {
branch: 'main',
rootDir: 'docs',
},
})
Full configuration properties:
| Property | Type | Default | Description |
|---|---|---|---|
owner | string | Auto-detected | Repository owner username |
name | string | Auto-detected | Repository name |
url | string | Auto-detected | Full repository URL |
branch | string | Auto-detected | Git branch name |
rootDir | string | - | Documentation root directory path |
commitPath | string | 'src' | Base path where component files are located |
suffix | string | 'vue' | Default extension for component files |
casing | 'auto' | 'kebab' | 'camel' | 'pascal' | 'auto': PascalCase for vue files, camelCase otherwise | File naming format |
since | string | '2025-01-31T04:00:00Z' | Start time of the commit history (ISO 8601 format) |
until | string | Current time | End time of the commit history (ISO 8601 format) |
per_page | number | 100 | Number of commits to fetch per request (1-100) |
author | string | - | Filter commits by author, using a GitHub username or email |
dateFormat | object | { locale: 'zh-CN', options: {...} } | Date formatting configuration |
commitPath, suffix, casing, since, until, per_page, and author are used by the CommitChangelog component. dateFormat is used by the PageLastCommit component. See the CommitChangelog documentation for details.Disabling GitHub integration
Set github: false to disable GitHub integration:
export default defineAppConfig({
github: false,
})
AI Chat configuration
Configure the AI Chat interface text, icons, shortcuts, and FAQ questions in app/app.config.ts.
Basic configuration
export default defineAppConfig({
aiChat: {
// Whether to show the floating input
floatingInput: true,
// Whether to show the "Explain this page with AI" button
explainWithAi: true,
// FAQ question list
faqQuestions: [
{
category: 'Quick start',
items: ['How do I install it?', 'How do I configure it?']
}
],
// Keyboard shortcuts
shortcuts: {
focusInput: 'meta_i' // ⌘I / Ctrl+I
}
}
})
Configuration properties:
| Property | Type | Default | Description |
|---|---|---|---|
floatingInput | boolean | true | Show the floating input at the bottom of documentation pages |
explainWithAi | boolean | true | Show the "Explain this page with AI" button in the documentation sidebar |
faqQuestions | `FaqQuestions | LocalizedFaqQuestions`{lang="ts-type"} | [] |
shortcuts.focusInput | string | 'meta_i' | Shortcut to focus the floating input |
Text configuration
Customize all the text in the AI Chat interface:
export default defineAppConfig({
aiChat: {
texts: {
title: 'AI Assistant',
clearChat: 'Clear chat history',
close: 'Close',
placeholder: 'Type your question...',
lineBreak: 'Line break',
trigger: 'Chat with AI',
explainWithAi: 'Explain this page with AI'
}
}
})
Icon configuration
Customize all the icons in the AI Chat interface:
export default defineAppConfig({
aiChat: {
icons: {
trigger: 'i-custom-ai',
explain: 'i-lucide-bot-message-square',
reasoning: 'i-lucide-brain',
close: 'i-lucide-panel-right-close',
clearChat: 'i-lucide-list-x',
providers: {
deepseek: 'i-hugeicons:deepseek',
alibaba: 'i-hugeicons:qwen',
zai: 'i-simple-icons:zig',
moonshotai: 'i-hugeicons:kimi-ai',
xai: 'i-hugeicons:grok-02'
}
}
}
})
FAQ question formats
Categorized format (recommended):
export default defineAppConfig({
aiChat: {
faqQuestions: [
{
category: 'Quick start',
items: ['How do I install it?', 'How do I configure it?']
},
{
category: 'Advanced usage',
items: ['How do I customize it?', 'How do I deploy it?']
}
]
}
})
Simple format:
export default defineAppConfig({
aiChat: {
faqQuestions: [
'How do I install it?',
'How do I configure it?',
'How do I customize it?'
]
}
})
Localized format (multilingual):
When i18n is enabled, group questions by locale code. The panel automatically picks the questions for the current locale (falling back to the default locale when missing). Each locale supports the simple or categorized format above.
export default defineAppConfig({
aiChat: {
faqQuestions: {
'zh-CN': [
{ category: '快速开始', items: ['如何安装?', '如何配置?'] }
],
'en': [
{ category: 'Getting Started', items: ['How to install?', 'How to configure?'] }
]
}
}
})
Component metadata configuration
Movk Nuxt Docs uses nuxt-component-meta to automatically generate component documentation (Props, Slots, Emits).
Default behavior
To avoid generating unnecessary documentation, components in the following paths are excluded by default:
app/components/,components/,docs/app/components/,templates/*/app/components/
componentMeta.include will have documentation generated.Configuration example
export default defineNuxtConfig({
componentMeta: {
// Supports string globs, regular expressions, or functions
include: [
'Button', // Exact match
'Card*', // Match components starting with Card
/^Modal/, // Regular expression
({ pascalName }) => pascalName.endsWith('Input')
],
// Optional: additional exclusion rules
exclude: [
'Internal*',
/Test$/
]
}
})
glob syntax: * matches characters (excluding /), ** matches any path.
Accessibility
Movk Nuxt Docs v1.7.0+ includes built-in accessibility support to ensure your documentation site is accessible to all users.
Built-in support
@nuxt/a11y module:
Movk Nuxt Docs integrates the @nuxt/a11y module by default, providing:
- Automated accessibility checks
- Focus management on route changes
- Keyboard navigation support
- Screen reader optimization
It is enabled by default and can be turned off via movkNuxtDocs.a11y:
export default defineNuxtConfig({
movkNuxtDocs: {
a11y: false,
},
})
Semantic HTML:
- Wraps the main content area in a
<main>tag - Uses appropriate heading levels (
<h1>-<h6>) - Adds
aria-labelattributes to interactive elements
Keyboard navigation:
All interactive elements support keyboard navigation:
| Shortcut | Function |
|---|---|
⌘I / Ctrl+I | Focus the AI Chat floating input |
Enter | Submit a question |
Escape | Close the panel or blur the input |
Tab | Move between focusable elements |
Troubleshooting
Resolve common issues you may run into when using Movk Nuxt Docs, including Google Fonts access, removing the pnpm shamefully-hoist setting, installing Tailwind CSS as a peer dependency, approving build scripts, and Vercel deployment OOM (out-of-memory) errors, with detailed solutions.
Customization
Override built-in components by creating Vue files of the same name in the components/ directory. A complete customization guide covering every interface area, including the header logo, desktop navigation menu, mobile drawer, footer, left/right sidebar slots, and the theme picker, with links to the default component source code.