Skip to main content
Docus provides a set of built-in Vue components for building documentation layouts and features. These components are automatically available in your pages.

​
Layout Components

​
AppHeader

Main application header with navigation, logo, and actions. Location: app/components/app/AppHeader.vue 
<template>
  <AppHeader />
</template>
Features:
  • Responsive navigation menu
  • Logo display (light/dark mode)
  • Search button
  • Color mode toggle
  • Language selector (if i18n enabled)
  • GitHub link (if configured)
  • AI Assistant trigger
Slots:
  • #title - Custom header title/logo
  • #right - Custom content in header right section
  • #toggle - Custom mobile menu toggle
  • #body - Custom content in mobile menu
Displays the site logo with context menu for brand assets. Location: app/components/app/AppHeaderLogo.vue 
<template>
  <AppHeaderLogo class="h-6 w-auto" />
</template>
Features:
  • Automatic light/dark mode switching
  • Context menu with copy/download options (for SVG logos)
  • Brand assets download link
  • Wordmark support
Uses: useLogoAssets() composable

​
AppHeaderCenter

Center section of the header for navigation or custom content. Location: app/components/app/AppHeaderCenter.vue 
<template>
  <AppHeaderCenter />
</template>

​
AppHeaderCTA

Call-to-action section in the header. Location: app/components/app/AppHeaderCTA.vue 
<template>
  <AppHeaderCTA />
</template>

​
AppFooter

Main application footer with customizable left and right sections. Location: app/components/app/AppFooter.vue 
<template>
  <AppFooter />
</template>
Slots:
  • #left - Custom content in footer left section
  • #right - Custom content in footer right section

​
AppFooterLeft

Left section of the footer (typically copyright/links). Location: app/components/app/AppFooterLeft.vue

​
AppFooterRight

Right section of the footer (typically social links). Location: app/components/app/AppFooterRight.vue

​
Documentation Components

​
DocsAsideLeftBody

Main navigation sidebar for documentation pages. Location: app/components/docs/DocsAsideLeftBody.vue 
<template>
  <DocsAsideLeftBody />
</template>
Features:
  • Automatic navigation tree from content
  • Active page highlighting
  • Collapsible sections
  • Smooth scrolling
Uses: Content navigation API

​
DocsAsideLeftTop

Top section of the left documentation sidebar. Location: app/components/docs/DocsAsideLeftTop.vue

​
DocsAsideRightBottom

Bottom section of the right documentation sidebar (TOC). Location: app/components/docs/DocsAsideRightBottom.vue Header links section for documentation pages (breadcrumbs, edit link). Location: app/components/docs/DocsPageHeaderLinks.vue 
<template>
  <DocsPageHeaderLinks />
</template>
Features:
  • Breadcrumb navigation
  • “Edit this page” GitHub link
  • Last updated timestamp

​
Utility Components

​
LanguageSelect

Language/locale selector dropdown with flag emojis. Location: app/components/LanguageSelect.vue 
<template>
  <LanguageSelect />
</template>
Features:
  • Flag emoji for each locale
  • Hover popover with locale list
  • Automatic route switching
  • Only shows when i18n is enabled and multiple locales configured
Uses: useDocusI18n() composable

​
IconMenuToggle

Animated menu toggle icon for mobile navigation. Location: app/components/IconMenuToggle.vue 
<template>
  <IconMenuToggle 
    :open="isOpen" 
    @click="toggle" 
  />
</template>
Props:
  • open (boolean) - Whether menu is open
Events:
  • @click - Emitted when clicked

​
Open Graph Images

​
OgImageDocs

Open Graph image template for documentation pages. Location: app/components/OgImage/OgImageDocs.vue 
<template>
  <OgImageDocs />
</template>
Features:
  • Automatic title and description from page frontmatter
  • Site branding
  • Optimized dimensions (1200x630)

​
OgImageLanding

Open Graph image template for landing pages. Location: app/components/OgImage/OgImageLanding.vue 
<template>
  <OgImageLanding />
</template>

​
Component Customization

All Docus components can be overridden by creating a file with the same path in your project: 
# Override AppHeader
mkdir -p app/components/app
touch app/components/app/AppHeader.vue

# Override DocsAsideLeftBody
mkdir -p app/components/docs
touch app/components/docs/DocsAsideLeftBody.vue

​
Using Nuxt UI Components

Docus is built on Nuxt UI, giving you access to all Nuxt UI components: 
<template>
  <div>
    <UButton to="/docs">View Docs</UButton>
    <UBadge color="primary">New</UBadge>
    <UCard>
      <template #header>
        <h3>Card Title</h3>
      </template>
      Card content here
    </UCard>
  </div>
</template>
See the Nuxt UI documentation for the complete component library.

​
Slots Reference

​
AppHeader Slots

​
#title
slot
Custom header title or logo
​
#right
slot
Content in the header right section (before built-in actions)
​
#toggle
slot
Custom mobile menu toggle buttonSlot Props:
  • open (boolean) - Menu open state
  • toggle (function) - Toggle function
​
#body
slot
Content in the mobile menu drawer

​
AppFooter Slots

​
#left
slot
Content in the footer left section
​
#right
slot
Content in the footer right section

Build docs developers (and LLMs) love

Get started for freeTalk to us