Configuration

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:

string

default:""

Title displayed in the header

Logo Configuration

string

Logo image for light mode (media path)

logo: {
  light: '/logo/logo-dark.svg'
}

string

Logo image for dark mode (media path)

string

default:""

Alt text for accessibility

object

Wordmark (text logo) configuration for brand assets

Wordmark Schema

wordmark: {
  light: string  // Light mode wordmark image
  dark: string   // Dark mode wordmark image
}

string

default:"logo"

Which logo variant to show: "logo" for icon or "wordmark" for full wordmark

string

default:"/favicon.ico"

Path to favicon file for brand asset downloads

string

Link to full brand assets page (shown in logo context menu)

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

string

default:""

Default site title

string

default:""

Default site description for meta tags

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

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

string

default:""

GitHub repository URL

string

default:"main"

Git branch containing documentation

string

default:""

Root directory within the repository

GitHub configuration is automatically detected from your Git repository metadata when not explicitly configured.

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

string

default:"On this page"

Title of the table of contents

string

default:"Community"

Title of the bottom section

array

default:"[]"

Links to display in the bottom section

Link Schema

{
  icon: string
  label: string
  to: string
  target?: string
}

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

boolean

default:"true"

Show floating input at bottom of documentation pages

boolean

default:"true"

Show “Explain with AI” button in documentation sidebar

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

string

default:"meta_i"

Keyboard shortcut to focus input (e.g., meta_i, ctrl_k)

string

default:"i-lucide-sparkles"

Icon for AI chat trigger button and slideover header

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

Extend Docus

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

Add Modules

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

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=your-api-key

string

API key for AI Gateway to enable the assistant feature

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.

Get Started

Concepts

Essentials

AI Features

Configuration

App Configuration

Header Configuration

Logo Configuration

SEO Configuration

GitHub Configuration

Table of Contents

AI Assistant Configuration

Nuxt Configuration

Environment Variables

Type Safety

Next Steps

Theming

Customization

​App Configuration

​Header Configuration

​Logo Configuration

​SEO Configuration

​Social Links

​GitHub Configuration

​Table of Contents

​AI Assistant Configuration

​Nuxt Configuration

​Environment Variables

​Type Safety

​Next Steps

Theming

Customization

App Configuration

Header Configuration

Logo Configuration

SEO Configuration

Social Links

GitHub Configuration

Table of Contents

AI Assistant Configuration

Nuxt Configuration

Environment Variables

Type Safety

Next Steps