Configuration

Learn how to configure Docux.

Minimal app.config.ts
export default defineAppConfig({
  docux: {
    title: 'Docux',
    description: 'My Docux Project',
    url: 'http://docux.dev'
  }
})
Complete app.config.ts
export default defineAppConfig({
  docux: {
    title: 'Docux',
    description: 'My Docux Project',
    url: 'http://docux.dev',
    image: '/social-card-preview.png',
    socials: {
      twitter: '@nyxb0',
      github: 'nyxb/docux',
      discord: 'https://nyxb.chat',
      youtube: 'https://youtube.com/nyxb_0',
    },
    github: {
      root: 'content',
      edit: true,
      contributors: false
    },
    layout: 'default',
    aside: {
      level: 1,
      filter: [],
    },
    header: {
      title: false,
      logo: true,
      showLinkIcon: false
    },
    footer: {
      credits: {
        icon: '',
        text: 'Powered by Docux',
        href: 'https://docux.dev',
      },
      textLinks: [
        {
          text: 'Nuxt',
          href: 'https://nuxt.com',
          target: '_blank',
          rel: 'noopener'
        }
      ],
      iconLinks: [
        {
          label: 'NuxtJS',
          href: 'https://nuxtjs.org',
          component: 'IconNuxtLabs',
        },
        {
          label: 'Vue Telescope',
          href: 'https://vuetelescope.com',
          component: 'IconVueTelescope',
        },
      ],
    }
  }
})
KeyTypeDefaultDescription
titlestringDocuxWebsite title
titleTemplatestringDocuxWebsite title template
descriptionstringMy Docux ProjectWebsite description
urlstringWebsite URL
layoutstringdefaultFallback layout to use (supports default or page)
Socials
socialsobject{}Social links
socials.githubstringThe repository to use on GitHub links
socials.twitterstringThe account to use on Twitter links
socials.youtubestringThe channel to use on Youtube links
socials.instagramstringThe account to use on Instagram links
socials.facebookstringThe account to use on Facebook links
socials.mediumstringThe account to use on Medium links
socials.[social]objectOverride social or display custom one
socials.[social].labelstringA label to use for the social
socials.[social].iconstringA icon to use for the social
socials.[social].hrefstringA link to use for the social
socials.[social].relstringnoopener noreferrerA space-separated list of link types
Header
headerobjectHeader configuration
header.logobooleanWhether or not to use Logo.vue as the header logo
header.titlestringIf set to a string, will be used in the header
header.showLinkIconbooleanIf set to true links icons will show in the header
header.excludestring[]An array of path to exclude out from the header navigation
Main
mainobjectMain configuration
main.paddedbooleantrueMake main content Container padded
Aside
asideobjectAside configuration
aside.levelstring0Aside base level of nesting
aside.collapsedbooleanWill be used as default value for collapsible navigation categories
aside.excludestring[]An array of path to exclude out from the aside navigation
Footer
footerobjectFooter configuration
footer.creditsobjectAn object defining the bottom left credits
footer.credits.iconobjectThe icon to use for the credits
footer.credits.textobjectThe text to use for the credits
footer.textLinksarray[]An array of texts to display at the center of footer
footer.textLinks[0].textstringThe text to display
footer.textLinks[0].hrefstringA link to use for the text
footer.textLinks[0].targetstring_selfWhere to display the linked URL, as the name for a browsing context
footer.textLinks[0].relstringnoopener noreferrerA space-separated list of link types
footer.iconLinksarray[]An array of icons to display in the footer
footer.iconLinks[0].labelstringA label to use for the icon
footer.iconLinks[0].hrefstringA link to use for the icon
footer.iconLinks[0].iconstringThe icon to use (can be a component name)
footer.iconLinks[0].relstringnoopener noreferrerA space-separated list of link types
GitHub
githubobjectfalseGitHub integration configuration
github.dirstringDirectory containing the files to be edited
github.branchstringBranch to start editing
github.repostringName of the GitHub repo to edit files
github.ownerstringOwner of the repo
github.editbooleanToggle "Edit this page on Github" component on documentation pages

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>
Edit this page on GitHub