Skip to main content
The app.config.ts file is used to configure your Docus site appearance, behavior, and integrations. All options are reactive and can be updated at runtime.

​
Configuration Schema

Docus uses a structured configuration schema defined in nuxt.schema.ts. Below are all available configuration options.

​
UI Customization

​
Colors

Customize the color scheme of your documentation site.
​
ui.colors.primary
string
default:"green"
Primary color of your UI. Choose from Tailwind CSS color names.Options: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
​
ui.colors.neutral
string
default:"slate"
Neutral color of your UI for backgrounds and borders.Options: slate, gray, zinc, neutral, stone
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'slate'
    }
  }
})

​
Icons

Customize icons used throughout the documentation interface.
​
ui.icons.search
string
default:"i-lucide-search"
Icon to display in the search bar.
​
ui.icons.dark
string
default:"i-lucide-moon"
Icon for the dark mode color mode button.
​
ui.icons.light
string
default:"i-lucide-sun"
Icon for the light mode color mode button.
​
ui.icons.external
string
default:"i-lucide-external-link"
Icon displayed next to external links.
​
ui.icons.chevron
string
default:"i-lucide-chevron-down"
Icon used for chevrons in navigation and dropdowns.
​
ui.icons.hash
string
default:"i-lucide-hash"
Icon displayed next to heading anchors.
export default defineAppConfig({
  ui: {
    icons: {
      search: 'i-heroicons-magnifying-glass',
      dark: 'i-heroicons-moon',
      light: 'i-heroicons-sun'
    }
  }
})

​
SEO Configuration

​
seo.title
string
default:""
Default title for SEO meta tags. Used as fallback when page-specific title is not provided.
​
seo.description
string
default:""
Default description for SEO meta tags. Used as fallback when page-specific description is not provided.
export default defineAppConfig({
  seo: {
    title: 'My Documentation Site',
    description: 'Comprehensive documentation for my project'
  }
})

​
Header Configuration

​
Basic Header

​
header.title
string
default:""
Title displayed in the header. Falls back to site name if logo is not provided.

​
Logo Configuration

​
header.logo.light
string
default:""
Path to logo image for light mode.
​
header.logo.dark
string
default:""
Path to logo image for dark mode.
​
header.logo.alt
string
default:""
Alt text for the logo image (accessibility).
​
header.logo.class
string
default:""
Additional CSS classes to apply to the logo image.
​
header.logo.display
string
default:"logo"
Which logo variant to show in the header.Options:
  • logo - Display the icon logo
  • wordmark - Display the full wordmark

​
Wordmark Configuration

​
header.logo.wordmark.light
string
default:""
Path to wordmark (text logo) image for light mode.
​
header.logo.wordmark.dark
string
default:""
Path to wordmark (text logo) image for dark mode.

​
Brand Assets

​
header.logo.favicon
string
default:"/favicon.ico"
Path to the favicon file for brand asset downloads.
​
header.logo.brandAssetsUrl
string
default:""
Link to the full brand assets page. Shown in the logo context menu for easy access to brand resources.
export default defineAppConfig({
  header: {
    title: 'Docus',
    logo: {
      light: '/logo/logo-dark.svg',
      dark: '/logo/logo-light.svg',
      alt: 'Docus Logo',
      wordmark: {
        light: '/logo/wordmark-dark.svg',
        dark: '/logo/wordmark-light.svg'
      },
      favicon: '/favicon.svg',
      display: 'wordmark',
      brandAssetsUrl: '/brand-assets'
    }
  }
})
​
socials
object
default:"{}"
Social network links displayed in the footer or header. Add any social platform as a key-value pair.Common platforms: twitter, x, github, discord, linkedin, youtube
export default defineAppConfig({
  socials: {
    x: 'https://x.com/nuxt_js',
    discord: 'https://discord.com/invite/ps2h6QT',
    github: 'https://github.com/nuxt/docus'
  }
})

​
Table of Contents

​
Main TOC

​
toc.title
string
default:"On this page"
Title of the table of contents sidebar.
​
toc.bottom.title
string
default:"Community"
Title of the bottom section in the table of contents.
​
toc.bottom.links
array
default:"[]"
Links to display in the bottom section of the TOC. Each link should have icon, label, to, and optionally target properties.
export default defineAppConfig({
  toc: {
    title: 'On this page',
    bottom: {
      title: 'Community',
      links: [
        {
          icon: 'i-lucide-book-open',
          label: 'Nuxt UI docs',
          to: 'https://ui.nuxt.com',
          target: '_blank'
        }
      ]
    }
  }
})

​
GitHub Integration

​
github.url
string
default:""
GitHub repository URL. Enables “Edit this page” links and GitHub icon in header.
​
github.branch
string
default:"main"
GitHub branch name for edit links.
​
github.rootDir
string
default:""
Root directory of documentation content in the repository. Used to construct correct edit URLs.
export default defineAppConfig({
  github: {
    url: 'https://github.com/nuxt/docus',
    branch: 'main',
    rootDir: 'docs'
  }
})

​
AI Assistant

Configure the AI-powered documentation assistant.

​
Display Options

​
assistant.floatingInput
boolean
default:"true"
Show the floating AI input at the bottom of documentation pages.
​
assistant.explainWithAi
boolean
default:"true"
Show the “Explain with AI” button in the documentation sidebar.

​
FAQ Questions

​
assistant.faqQuestions
array
default:"[]"
List of FAQ questions for the AI assistant. Can be an array of strings or an array of category objects with questions.Supports internationalization by using an object with locale keys.

​
Keyboard Shortcuts

​
assistant.shortcuts.focusInput
string
default:"meta_i"
Keyboard shortcut to focus the floating AI input.Format: meta_i, ctrl_k, etc.

​
Assistant Icons

​
assistant.icons.trigger
string
default:"i-lucide-sparkles"
Icon for the AI chat trigger button and slideover header.
​
assistant.icons.explain
string
default:"i-lucide-brain"
Icon for the “Explain with AI” button.
export default defineAppConfig({
  assistant: {
    floatingInput: true,
    explainWithAi: true,
    faqQuestions: {
      en: [
        { category: 'Getting Started', items: [
          'How do I install Docus?',
          'What is the project structure?'
        ]},
        { category: 'Customization', items: [
          'How do I customize the theme?',
          'How do I add custom components?'
        ]}
      ],
      fr: [
        { category: 'Démarrage', items: [
          'Comment installer Docus ?',
          'Quelle est la structure du projet ?'
        ]}
      ]
    },
    shortcuts: {
      focusInput: 'meta_i'
    },
    icons: {
      trigger: 'i-lucide-sparkles',
      explain: 'i-lucide-brain'
    }
  }
})

​
Complete Example

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate'
    },
    icons: {
      search: 'i-lucide-search',
      dark: 'i-lucide-moon',
      light: 'i-lucide-sun'
    }
  },
  seo: {
    title: 'My Documentation',
    description: 'Complete guide for my project'
  },
  header: {
    title: 'Docus',
    logo: {
      light: '/logo/logo-dark.svg',
      dark: '/logo/logo-light.svg',
      alt: 'Docus Logo',
      wordmark: {
        light: '/logo/wordmark-dark.svg',
        dark: '/logo/wordmark-light.svg'
      },
      favicon: '/favicon.svg'
    }
  },
  socials: {
    x: 'https://x.com/nuxt_js',
    discord: 'https://discord.com/invite/ps2h6QT',
    github: 'https://github.com/nuxt/docus'
  },
  toc: {
    title: 'On this page',
    bottom: {
      title: 'Community',
      links: [
        {
          icon: 'i-lucide-book-open',
          label: 'Nuxt UI docs',
          to: 'https://ui.nuxt.com',
          target: '_blank'
        }
      ]
    }
  },
  github: {
    url: 'https://github.com/nuxt/docus',
    branch: 'main',
    rootDir: 'docs'
  },
  assistant: {
    floatingInput: true,
    explainWithAi: true,
    faqQuestions: [
      'How do I install Docus?',
      'How do I customize the theme?'
    ]
  }
})

Build docs developers (and LLMs) love

Get started for freeTalk to us