Core Concepts

Customization

Learn how to override built-in components in Docus to customize your documentation.

Docus is built on top of Nuxt 3 which offers a flexible component layer system that allows you to override some part of the UI by redefining specific components in your own app. This makes it easy to fully customize the visual appearance and behavior of your documentation without touching the core theme.

To override a component, simply create a Vue file with the same name in the components/ directory. Docus will automatically use your version instead of the default one.

App Header

You can customize different parts of the header by overriding the following components:

To replace the default logo in the header, create the components/AppHeaderLogo.vue file. Your component will replace the default one provided by Docus theme.

App header logo visualisation

Default component code

AppHeaderCTA

To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the components/AppHeaderCTA.vue component.

App header CTA visualisation

By default this components is empty but you can have a look at how we're overriding it on Docus documentation itself.

AppHeaderCenter

To customize the center area in the header, override the components/AppHeaderCenter.vue component. Your component will replace the search bar provided by Docus theme.

App header logo visualisation

Default component code

AppHeaderBody

By default, when you open the menu on mobile view, Docus is displaying your content/ folder tree as a menu with the ContentNavigation component. You can override this menu with the components/AppHeaderBody.vue component and fill the menu body (under the header) in mobile.

App header body visualisation

Default component code

Docs

You can also customize header and both asides of the documentation pages.

DocsPageHeaderLinks

In the header right side of your documentation page, Docus default behaviour is displaying a dropdown with quick actions related to the current page’s Markdown source. It allows the reader of the documentation to:

  • Copy a direct link to the raw .md file to the clipboard.
  • View the Markdown source in a new browser tab.
  • Open the page’s content in ChatGPT or Claude, pre-filled with a prompt to analyze the Markdown file.

These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own components/DocsPageHeaderLinks.vue component to override it.

App Page Header Links

Default component code

DocsAsideRightBottom

To customize bottom part of the right aside of the documentation pages. You can create thecomponents/DocsAsideRightBottom.vue component. Your component will replace the default bottom table of content provided by Docus theme.

Docs right aside bottom

Default component code

DocsAsideLeftTop

To customize top part of the left aside of the documentation pages. You can create thecomponents/DocsAsideLeftTop.vue component.

Docs Aside Left Top

By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.

Theme

Custom the appearance of your Docus documentation thanks to Nuxt UI flexible theming.

LLMs Integration

Docus generate AI-ready content files using Nuxt LLMs module