Configuration
Learn how to configure Docux.
Minimal app.config.ts
export default defineAppConfig({
docux: {
title: 'Docux',
description: 'My Docux Project',
url: 'http://docux.dev'
}
})
Key | Type | Default | Description |
---|---|---|---|
title | string | Docux | Website title |
titleTemplate | string | Docux | Website title template |
description | string | My Docux Project | Website description |
url | string | Website URL | |
layout | string | default | Fallback layout to use (supports default or page ) |
Socials | |||
socials | object | {} | Social links |
socials.github | string | The repository to use on GitHub links | |
socials.twitter | string | The account to use on Twitter links | |
socials.youtube | string | The channel to use on Youtube links | |
socials.instagram | string | The account to use on Instagram links | |
socials.facebook | string | The account to use on Facebook links | |
socials.medium | string | The account to use on Medium links | |
socials.[social] | object | Override social or display custom one | |
socials.[social].label | string | A label to use for the social | |
socials.[social].icon | string | A icon to use for the social | |
socials.[social].href | string | A link to use for the social | |
socials.[social].rel | string | noopener noreferrer | A space-separated list of link types |
Header | |||
header | object | Header configuration | |
header.logo | boolean | Whether or not to use Logo.vue as the header logo | |
header.title | string | If set to a string, will be used in the header | |
header.showLinkIcon | boolean | If set to true links icons will show in the header | |
header.exclude | string[] | An array of path to exclude out from the header navigation | |
Main | |||
main | object | Main configuration | |
main.padded | boolean | true | Make main content Container padded |
Aside | |||
aside | object | Aside configuration | |
aside.level | string | 0 | Aside base level of nesting |
aside.collapsed | boolean | Will be used as default value for collapsible navigation categories | |
aside.exclude | string[] | An array of path to exclude out from the aside navigation | |
Footer | |||
footer | object | Footer configuration | |
footer.credits | object | An object defining the bottom left credits | |
footer.credits.icon | object | The icon to use for the credits | |
footer.credits.text | object | The text to use for the credits | |
footer.textLinks | array | [] | An array of texts to display at the center of footer |
footer.textLinks[0].text | string | The text to display | |
footer.textLinks[0].href | string | A link to use for the text | |
footer.textLinks[0].target | string | _self | Where to display the linked URL, as the name for a browsing context |
footer.textLinks[0].rel | string | noopener noreferrer | A space-separated list of link types |
footer.iconLinks | array | [] | An array of icons to display in the footer |
footer.iconLinks[0].label | string | A label to use for the icon | |
footer.iconLinks[0].href | string | A link to use for the icon | |
footer.iconLinks[0].icon | string | The icon to use (can be a component name) | |
footer.iconLinks[0].rel | string | noopener noreferrer | A space-separated list of link types |
GitHub | |||
github | object | false | GitHub integration configuration |
github.dir | string | Directory containing the files to be edited | |
github.branch | string | Branch to start editing | |
github.repo | string | Name of the GitHub repo to edit files | |
github.owner | string | Owner of the repo | |
github.edit | boolean | Toggle "Edit this page on Github" component on documentation pages |
Customizing the logo
To update the logo in the header, create a component in components/Logo.vue
with your own logo.
In this example, the image is located at /public/img
.
components/Logo.vue
<template>
<img width="120" src="/img/YOURLOGO.png"/>
</template>
APILayoutsDocux provides multiple built-in layouts for displaying your Markdown pages.ElementsAlertThe Alert component is a customizable component that allows to grab user attention and communicate an important message (like network event, app state errors or notifications, user account messages etc).