--- title: "Configure your documentation site" description: "A complete reference for customizing SEO metadata, header navigation, footer credits, sidebar navigation filtering, and the AI Chat interface via app.config.ts, as well as configuring module-level options such as GitHub integration, component metadata generation, Mermaid diagrams, and accessibility via nuxt.config.ts." canonical_url: "https://docs.mhaibaraai.cn/en/docs/getting-started/configuration" --- # Configure your documentation site > A complete reference for customizing SEO metadata, header navigation, footer credits, sidebar navigation filtering, and the AI Chat interface via app.config.ts, as well as configuring module-level options such as GitHub integration, component metadata generation, Mermaid diagrams, and accessibility via nuxt.config.ts. ## App configuration > [!WARNING] > See: https://nuxt.com/docs/4.x/directory-structure/app/app-config > > Overriding > > app/app.config.ts > > also requires creating a > > nuxt.config.ts > > file. ### 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`. ```ts [app/app.config.ts] 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: '', }, }) ``` ```ts [nuxt.config.ts] export default defineNuxtConfig({ site: { name: 'Movk Nuxt Docs', }, }) ``` #### Per-page configuration Define SEO metadata in the front-matter of a Markdown file: ```md [md] [content/concepts/configuration.md] --- seo: title: 'Configuration' description: 'Customize your documentation through the Nuxt app config file.' --- ``` > [!TIP] > See: https://content.nuxt.com/docs/collections/types#page-type > > See the Nuxt Content front-matter documentation. ### Header ```ts [app/app.config.ts] 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 ```ts [app/app.config.ts] export default defineAppConfig({ footer: { // Credits credits: `Copyright © 2024 - ${new Date().getFullYear()} YiXuan - MIT License`, // 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. ```ts [app/app.config.ts] 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. ```ts [app/app.config.ts] 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. ```ts [nuxt.config.ts] 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 ).
> [!TIP] > See: /en/docs/typography/mermaid > > See the Mermaid documentation for the diagram syntax and complete usage. ## GitHub integration Uses [git-url-parse](https://github.com/IonicaBizau/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 `CommitChangelog` component ### Basic configuration Configure GitHub integration in `app/app.config.ts`: ```ts [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
> [!TIP] > See: /en/docs/components/commit-changelog > > 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: ```ts [app/app.config.ts] export default defineAppConfig({ github: false, }) ``` ## AI Chat configuration > [!TIP] > See: /en/docs/getting-started/ai-chat > > See the complete AI Chat documentation Configure the AI Chat interface text, icons, shortcuts, and FAQ questions in `app/app.config.ts`. ### Basic configuration ```ts [app/app.config.ts] 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: ```ts [app/app.config.ts] 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: ```ts [app/app.config.ts] 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):** ```ts [app/app.config.ts] 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:** ```ts [app/app.config.ts] 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. ```ts [app/app.config.ts] 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`](https://github.com/nuxt-content/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/` > [!WARNING] > > Only components explicitly specified via > > componentMeta.include > > will have documentation generated. ### Configuration example ```ts [nuxt.config.ts] 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. > [!TIP] > See: https://github.com/nuxt-content/nuxt-component-meta > > See the full > > nuxt-component-meta > > documentation for more configuration options and advanced usage. ## 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](https://a11y.nuxtjs.org/) 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`: ```ts [nuxt.config.ts] export default defineNuxtConfig({ movkNuxtDocs: { a11y: false, }, }) ``` **Semantic HTML:** - Wraps the main content area in a `
` tag - Uses appropriate heading levels (`

` - `

`) - Adds `aria-label` attributes 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
> [!TIP] > See: https://github.com/nuxt/a11y > > Learn more about the configuration options for the @nuxt/a11y module ## Sitemap See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.