Skip to main content
Docus provides a comprehensive configuration system through app.config.ts and type-safe schema definitions via nuxt.schema.ts.

​
App Configuration

The app.config.ts file is the primary configuration file for your Docus site:
[app.config.ts]
export default defineAppConfig({
  header: {
    title: 'Docus',
    logo: {
      light: '/logo/logo-dark.svg',
      dark: '/logo/logo-light.svg',
      alt: 'Docus Logo',
    },
  },
  socials: {
    x: 'https://x.com/nuxt_js',
    discord: 'https://discord.com/invite/ps2h6QT',
    github: 'https://github.com/nuxt/nuxt',
  },
  github: {
    rootDir: 'docs',
  },
})

​
Header Configuration

Customize your site’s header including title, logo, and branding:
​
header.title
string
default:""
Title displayed in the header

​
Logo Configuration

​
header.logo.light
string
Logo image for light mode (media path)
logo: {
  light: '/logo/logo-dark.svg'
}
​
header.logo.dark
string
Logo image for dark mode (media path)
​
header.logo.alt
string
default:""
Alt text for accessibility
​
header.logo.wordmark
object
Wordmark (text logo) configuration for brand assets
wordmark: {
  light: string  // Light mode wordmark image
  dark: string   // Dark mode wordmark image
}
​
header.logo.display
string
default:"logo"
Which logo variant to show: "logo" for icon or "wordmark" for full wordmark
​
header.logo.favicon
string
default:"/favicon.ico"
Path to favicon file for brand asset downloads
​
header.logo.brandAssetsUrl
string
Link to full brand assets page (shown in logo context menu)
​
header.logo.class
string
Additional CSS classes to apply to the logo image

​
SEO Configuration

Configure SEO settings for your documentation:
[app.config.ts]
export default defineAppConfig({
  seo: {
    titleTemplate: '%s - Docus',
    title: 'Docus',
    description: 'Write beautiful docs with Markdown.',
  },
})
​
seo.title
string
default:""
Default site title
​
seo.description
string
default:""
Default site description for meta tags
​
seo.titleTemplate
string
Template for page titles. Use %s as placeholder for page title
titleTemplate: '%s - My Docs' // "Getting Started - My Docs"
SEO configuration is automatically inferred from your package.json if not explicitly set.
Add social media links to your header:
[app.config.ts]
export default defineAppConfig({
  socials: {
    x: 'https://x.com/nuxt_js',
    discord: 'https://discord.com/invite/ps2h6QT',
    github: 'https://github.com/nuxt/nuxt',
    nuxt: 'https://nuxt.com',
  },
})
​
socials
object
default:"{}"
Social network links configuration. Supports any key-value pairs where the key is the platform name and value is the URL.

​
GitHub Configuration

Configure GitHub integration for “Edit this page” functionality:
[app.config.ts]
export default defineAppConfig({
  github: {
    url: 'https://github.com/nuxt/nuxt',
    branch: 'main',
    rootDir: 'docs',
  },
})
​
github.url
string
default:""
GitHub repository URL
​
github.branch
string
default:"main"
Git branch containing documentation
​
github.rootDir
string
default:""
Root directory within the repository
GitHub configuration is automatically detected from your Git repository metadata when not explicitly configured.

​
Table of Contents

Customize the table of contents sidebar:
[app.config.ts]
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',
        },
      ],
    },
  },
})
​
toc.title
string
default:"On this page"
Title of the table of contents
​
toc.bottom.title
string
default:"Community"
Title of the bottom section
​
toc.bottom.links
array
default:"[]"
Links to display in the bottom section

​
AI Assistant Configuration

Configure the AI-powered documentation assistant:
[app.config.ts]
export default defineAppConfig({
  assistant: {
    floatingInput: true,
    explainWithAi: true,
    faqQuestions: [
      'How do I install Docus?',
      'How do I customize the theme?',
    ],
    shortcuts: {
      focusInput: 'meta_i',
    },
    icons: {
      trigger: 'i-lucide-sparkles',
      explain: 'i-lucide-brain',
    },
  },
})
​
assistant.floatingInput
boolean
default:"true"
Show floating input at bottom of documentation pages
​
assistant.explainWithAi
boolean
default:"true"
Show “Explain with AI” button in documentation sidebar
​
assistant.faqQuestions
array
default:"[]"
List of FAQ questions. Can be an array of strings or an array of categories with questions:
faqQuestions: {
  en: [
    { 
      category: 'Getting Started', 
      items: ['How do I install?', 'What is the structure?']
    },
  ],
  fr: [
    { 
      category: 'Démarrage', 
      items: ['Comment installer ?']
    },
  ],
}
​
assistant.shortcuts.focusInput
string
default:"meta_i"
Keyboard shortcut to focus input (e.g., meta_i, ctrl_k)
​
assistant.icons.trigger
string
default:"i-lucide-sparkles"
Icon for AI chat trigger button and slideover header
​
assistant.icons.explain
string
default:"i-lucide-brain"
Icon for “Explain with AI” button

​
Nuxt Configuration

Extend Docus with Nuxt configuration:
[nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['docus'],
  modules: ['@nuxtjs/i18n', 'nuxt-studio'],
  site: {
    name: 'Docus',
  },
  content: {
    build: {
      markdown: {
        highlight: {
          langs: ['bash', 'typescript', 'javascript', 'vue'],
        },
      },
    },
  },
})
1

Extend Docus

Use extends: ['docus'] to inherit all Docus features
2

Add Modules

Include additional Nuxt modules like @nuxtjs/i18n or nuxt-studio
3

Configure Content

Customize Nuxt Content behavior including syntax highlighting and plugins

​
Environment Variables

Docus respects the following environment variables: 
AI_GATEWAY_API_KEY=your-api-key
NUXT_PUBLIC_SITE_URL=https://docus.dev
​
AI_GATEWAY_API_KEY
string
API key for AI Gateway to enable the assistant feature
​
NUXT_PUBLIC_SITE_URL
string
Public site URL for absolute links and SEO

​
Type Safety

Docus provides full TypeScript support with schema validation:
[nuxt.schema.ts]
import { field, group } from '@nuxt/content/preview'

export default defineNuxtSchema({
  appConfig: {
    ui: group({
      title: 'UI',
      fields: {
        colors: group({
          fields: {
            primary: field({
              type: 'string',
              default: 'green',
              required: ['red', 'orange', 'green', 'blue'],
            }),
          },
        }),
      },
    }),
  },
})
The schema is primarily used by Nuxt Studio for visual configuration. Most users will configure settings directly in app.config.ts.

​
Next Steps

Theming

Customize colors and design tokens

Customization

Extend and override components

Build docs developers (and LLMs) love

Get started for freeTalk to us