Configuration

Learn how to configure Docus.

::code-group

export default defineAppConfig({
  docus: {
    title: 'Docus',
    description: 'My Docus Project',
    url: 'http://docus.dev'
  }
})

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',
        },
      ],
    }
  }
})

Key	Type	Default	Description
`title`	`string`	Docus	Website title
`titleTemplate`	`string`	Docus	Website title template
`description`	`string`	My Docus 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
`header.fluid`	`boolean`	`true`	Make header `Container` fluid
Main
`main`	`object`		Main configuration
`main.fluid`	`boolean`	`true`	Make main content `Container` fluid
`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
`footer.fluid`	`boolean`	`true`	Make footer `Container` fluid
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
Search
`fuse`	`object`		useFuse options

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.

<template>
  <img width="120" src="/img/YOURLOGO.png"/>
</template>

12 KiB Raw Blame History

Configuration

Customizing the logo

12 KiB

Raw Blame History