132 lines
4.8 KiB
Markdown
132 lines
4.8 KiB
Markdown
---
|
||
navigation:
|
||
icon: i-lucide-pen-tool
|
||
title: Customization
|
||
description: 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:
|
||
|
||
### `AppHeaderLogo`
|
||
|
||
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.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::u-button
|
||
---
|
||
color: neutral
|
||
icon: i-lucide-code-xml
|
||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderLogo.vue
|
||
variant: link
|
||
---
|
||
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.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::prose-note
|
||
---
|
||
to: https://github.com/nuxtlabs/docus/blob/docs/components/AppHeaderCTA.vue
|
||
---
|
||
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.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::u-button
|
||
---
|
||
color: neutral
|
||
icon: i-lucide-code-xml
|
||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderCenter.vue
|
||
variant: link
|
||
---
|
||
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](https://ui.nuxt.com/components/content-navigation) component. You can override this menu with the `components/AppHeaderBody.vue` component and fill the menu body (under the header) in mobile.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::u-button
|
||
---
|
||
color: neutral
|
||
icon: i-lucide-code-xml
|
||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderBody.vue
|
||
variant: link
|
||
---
|
||
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.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::u-button
|
||
---
|
||
color: neutral
|
||
icon: i-lucide-code-xml
|
||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsHeaderRight.vue
|
||
variant: link
|
||
---
|
||
Default component code
|
||
::
|
||
|
||
### `DocsAsideRightBottom`
|
||
|
||
To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by Docus theme.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::u-button
|
||
---
|
||
color: neutral
|
||
icon: i-lucide-code-xml
|
||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsAsideRightBottom.vue
|
||
variant: link
|
||
---
|
||
Default component code
|
||
::
|
||
|
||
### `DocsAsideLeftTop`
|
||
|
||
To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.
|
||
|
||
{.rounded-lg.border.border-accented}
|
||
|
||
::prose-note
|
||
---
|
||
to: https://github.com/nuxt/image/blob/docs/docus/docus/app/components/DocsAsideLeftTop.vue
|
||
---
|
||
By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
|
||
::
|