Configure your documentation site

View source
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

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.

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: '',
  },
})

Per-page configuration

Define SEO metadata in the front-matter of a Markdown file:

md] [content/concepts/configuration.md
---
seo:
  title: 'Configuration'
  description: 'Customize your documentation through the Nuxt app config file.'
---

<!-- Page content -->
See the Nuxt Content front-matter documentation.
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
  },
})
app/app.config.ts
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.

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.

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:

PropertyTypeDefaultDescription
filter.enabledbooleanfalseWhether to show the navigation filter box at the top of the sidebar
filter.placeholderstring'Filter navigation...'Placeholder text for the filter box
filter.thresholdnumber10Only show the filter box when the total number of navigation items in the current group reaches this value
filter.shortcutstring'/'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.

nuxt.config.ts
export default defineNuxtConfig({
  movkNuxtDocs: {
    a11y: true,
    mermaid: false
  },
})
OptionDefaultDescription
a11ytrueWhether to enable @nuxt/a11y accessibility support.
mermaidfalseWhether to enable Mermaid diagram rendering (requires installing mermaid and dompurify).
See the Mermaid documentation for the diagram syntax and complete usage.

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 CommitChangelog component

Basic configuration

Configure GitHub integration in app/app.config.ts:

app/app.config.ts
export default defineAppConfig({
  github: {
    branch: 'main',
    rootDir: 'docs',
  },
})

Full configuration properties:

PropertyTypeDefaultDescription
ownerstringAuto-detectedRepository owner username
namestringAuto-detectedRepository name
urlstringAuto-detectedFull repository URL
branchstringAuto-detectedGit branch name
rootDirstring-Documentation root directory path
commitPathstring'src'Base path where component files are located
suffixstring'vue'Default extension for component files
casing'auto' | 'kebab' | 'camel' | 'pascal''auto': PascalCase for vue files, camelCase otherwiseFile naming format
sincestring'2025-01-31T04:00:00Z'Start time of the commit history (ISO 8601 format)
untilstringCurrent timeEnd time of the commit history (ISO 8601 format)
per_pagenumber100Number of commits to fetch per request (1-100)
authorstring-Filter commits by author, using a GitHub username or email
dateFormatobject{ 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:

app/app.config.ts
export default defineAppConfig({
  github: false,
})

AI Chat configuration

See the complete AI Chat documentation

Configure the AI Chat interface text, icons, shortcuts, and FAQ questions in app/app.config.ts.

Basic configuration

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:

PropertyTypeDefaultDescription
floatingInputbooleantrueShow the floating input at the bottom of documentation pages
explainWithAibooleantrueShow the "Explain this page with AI" button in the documentation sidebar
faqQuestions`FaqQuestionsLocalizedFaqQuestions`{lang="ts-type"}[]
shortcuts.focusInputstring'meta_i'Shortcut to focus the floating input

Text configuration

Customize all the text in the AI Chat interface:

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:

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):

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:

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.

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 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/
Only components explicitly specified via componentMeta.include will have documentation generated.

Configuration example

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.

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 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:

nuxt.config.ts
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-label attributes to interactive elements

Keyboard navigation:

All interactive elements support keyboard navigation:

ShortcutFunction
⌘I / Ctrl+IFocus the AI Chat floating input
EnterSubmit a question
EscapeClose the panel or blur the input
TabMove between focusable elements
Learn more about the configuration options for the @nuxt/a11y module
Copyright © 2024 - 2026