Je hebt Javascript nodig om deze website te kunnen gebruiken. Pas je browserinstellingen in om verder te gaan!
Guides

Customise

Adapt the shared documentation shell to your project.

The layer supplies sensible defaults, but the consuming project owns its visual identity. Nuxt layers merge application files over the layer, so most customisation belongs in app/ in the consuming project.

Add app configuration

Use app/app.config.ts for Docus and Nuxt UI settings such as colors, GitHub metadata, table of contents, newsletter, and assistant behavior.

The description is rendered as plain text; HTML and Markdown are not supported.

app/app.config.ts
export default defineAppConfig({
  statusPage: "https://mystatuspage.com",
  github: {
    owner: "example",
    name: "example-docs",
    url: "https://github.com/example/example-docs"
  },
  publisher: {
    name: "Example Team",
    url: "https://example.com",
    contact: "https://example.com/contact"
  },
  toc: {
    // Add a bottom section to the table of contents
    bottom: {
      title: "Further Reading",
      links: [
        {
          icon: getIcon("github_alt"),
          label: "Code Examples",
          to: "https://github.com/onderwijsin",
          target: "_blank"
        },
        {
          icon: getIcon("code"),
          label: "View Source",
          to: "https://github.com/onderwijsin/docus-plus",
          target: "_blank"
        }
      ]
    }
  },
  ui: {
    colors: {
      primary: "indigo",
      neutral: "slate"
    }
  },
  assistant: {
    floatingInput: true,
    explainWithAi: true,
    faqQuestions: [
      {
        category: "Getting started",
        items: [
          "How do I add my first documentation page?",
          "Where should I configure my site's identity?",
          "How do I override the default logo?"
        ]
      },
      {
        category: "Content",
        items: [
          "How should I organise content pages?",
          "What belongs in app.config.ts?",
          "How do I add a navigation section?"
        ]
      },
      {
        category: "Styling",
        items: [
          "Where do I add CSS tokens?",
          "How do I customise Nuxt UI colors?",
          "How do I replace AppHeaderLogo?"
        ]
      }
    ]
  }
});

Configure the newsletter banner

When Mailchimp is enabled, documentation pages show a newsletter banner at the bottom. Configure its plain-text heading and description in app/app.conf§ig.ts:

app/app.config.ts
export default defineAppConfig({
  newsletter: {
    title: "Keep in touch with the latest",
    description: "Sign up for our monthly deep dives - straight to your inbox."
  }
});

Keep the layer stylesheet

Your app/app.css must import the shared stylesheet before adding project-specific tokens:

app/app.css
@import "#layers/docus-plus/app/app.css";

@theme {
  /* 
    Add your tailwind theme tokens for colors and fonts here! 
    @see https://ui.nuxt.com/docs/getting-started/theme/design-system
  */
  --color-brand-500: oklch(60% 0.2 250);
}

This preserves the layer's base styles and tokens while allowing the consumer to add its own palette.

Create app/components/AppHeaderLogo.vue to replace the default logo:

app/components/AppHeaderLogo.vue
<template>
  <span class="font-mono h-6 w-auto shrink-0">Example Docs</span>
</template>

Nuxt component resolution uses the consuming application's component when it has the same name as a layer component.

Customize OG images

OG image customization has its own runtime and template requirements. See the dedicated OG image rendering guide.

Keep content and branding in the consuming application. Change the layer only when the behavior is useful to every site built on it.

Content

Organise documentation pages and make them easy to discover.

Integrations

Configure the shared integrations and prepare a Docus Plus site for production.

Keep in touch with the latest

Sign up for our monthly deep dives - straight to your inbox.