Configuration

Learn how to configure Docus.

Minimal app.config.ts
export default defineAppConfig({
  docus: {
    title: 'Docus',
    description: 'My Docus Project',
    url: 'http://docus.dev'
  }
})
Complete app.config.ts
export default defineAppConfig({
  docus: {
    title: 'Docus',
    description: 'My Docus Project',
    url: 'http://docus.dev',
    image: '/social-card-preview.png',
    socials: {
      twitter: '@nuxt_js',
      github: 'nuxt-themes/docus',
    },
    github: {
      root: 'content',
      edit: true,
      contributors: false
    },
    layout: 'default',
    aside: {
      level: 1,
      filter: [],
    },
    header: {
      title: false,
      logo: true,
      showLinkIcon: false
    },
    footer: {
      credits: {
        icon: 'IconDocus',
        text: 'Powered by Docus',
        href: 'https://docus.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
titlestringDocusWebsite title
titleTemplatestringDocusWebsite title template
descriptionstringMy Docus 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
header.fluidbooleantrueMake header Container fluid
Main
mainobjectMain configuration
main.fluidbooleantrueMake main content Container fluid
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
footer.fluidbooleantrueMake footer Container fluid
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
Search
fuseobjectuseFuse options

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