App Config

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.

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

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.

string

default:"i-lucide-search"

Icon to display in the search bar.

string

default:"i-lucide-moon"

Icon for the dark mode color mode button.

string

default:"i-lucide-sun"

Icon for the light mode color mode button.

string

default:"i-lucide-external-link"

Icon displayed next to external links.

string

default:"i-lucide-chevron-down"

Icon used for chevrons in navigation and dropdowns.

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

string

default:""

Default title for SEO meta tags. Used as fallback when page-specific title is not provided.

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

string

default:""

Title displayed in the header. Falls back to site name if logo is not provided.

Logo Configuration

string

default:""

Path to logo image for light mode.

string

default:""

Path to logo image for dark mode.

string

default:""

Alt text for the logo image (accessibility).

string

default:""

Additional CSS classes to apply to the logo image.

string

default:"logo"

Which logo variant to show in the header.Options:

logo - Display the icon logo
wordmark - Display the full wordmark

Wordmark Configuration

string

default:""

Path to wordmark (text logo) image for light mode.

string

default:""

Path to wordmark (text logo) image for dark mode.

Brand Assets

string

default:"/favicon.ico"

Path to the favicon file for brand asset downloads.

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

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

Main TOC

string

default:"On this page"

Title of the table of contents sidebar.

Bottom Links

string

default:"Community"

Title of the bottom section in the table of contents.

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

string

default:""

GitHub repository URL. Enables “Edit this page” links and GitHub icon in header.

string

default:"main"

GitHub branch name for edit links.

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

boolean

default:"true"

Show the floating AI input at the bottom of documentation pages.

boolean

default:"true"

Show the “Explain with AI” button in the documentation sidebar.

FAQ Questions

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

string

default:"meta_i"

Keyboard shortcut to focus the floating AI input.Format: meta_i, ctrl_k, etc.

Assistant Icons

string

default:"i-lucide-sparkles"

Icon for the AI chat trigger button and slideover header.

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?'
    ]
  }
})

Configuration

Components

Composables

Configuration Schema

UI Customization

Colors

Icons

SEO Configuration

Header Configuration

Basic Header

Logo Configuration

Wordmark Configuration

Brand Assets

Table of Contents

Main TOC

Bottom Links

GitHub Integration

AI Assistant

Display Options

FAQ Questions

Keyboard Shortcuts

Assistant Icons

Complete Example

​Configuration Schema

​UI Customization

​Colors

​Icons

​SEO Configuration

​Header Configuration

​Basic Header

​Logo Configuration

​Wordmark Configuration

​Brand Assets

​Social Links

​Table of Contents

​Main TOC

​Bottom Links

​GitHub Integration

​AI Assistant

​Display Options

​FAQ Questions

​Keyboard Shortcuts

​Assistant Icons

​Complete Example

Configuration Schema

UI Customization

Colors

Icons

SEO Configuration

Header Configuration

Basic Header

Logo Configuration

Wordmark Configuration

Brand Assets

Social Links

Table of Contents

Main TOC

Bottom Links

GitHub Integration

AI Assistant

Display Options

FAQ Questions

Keyboard Shortcuts

Assistant Icons

Complete Example