# Configuration

Learn how to configure Docus.

::code-group

```ts [Minimal app.config.ts]
export default defineAppConfig({
  docus: {
    title: 'Docus',
    description: 'My Docus Project',
    url: 'http://docus.dev'
  }
})
```

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

::

| **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](https://developer.mozilla.org/en-US/docs/Web/HTML/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](https://developer.mozilla.org/en-US/docs/Web/HTML/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](https://developer.mozilla.org/en-US/docs/Web/HTML/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](https://vueuse.org/integrations/useFuse/) |


## 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`.

```vue [components/Logo.vue]
<template>
  <img width="120" src="/img/YOURLOGO.png"/>
</template>
```