Skip to content

Custom AppHeaderLogo.vue component not overriding default one #1397

Description

@Phyroks

I'm trying to override the default AppHeaderLogo component in Docus by placing my own AppHeaderLogo.vue inside the /components directory. However, the default component is still being used and my custom version is never rendered.

Versions

  • Docus: 5.12.1
  • Nuxt: 4.4.8

What I expected

According to the documentation and standard Nuxt component auto-import/override behavior, placing a component with the same name in the /components directory should override the internal one.

What actually happens

The default AppHeaderLogo from Docus is still being used. My custom component seems to be ignored.

My component

<script setup>
const config = useRuntimeConfig()
const appName = config.public.appName
</script>

<template>
  <div class="flex items-center gap-3">
    <img src="/icon.svg" alt="Logo" class="h-6 w-auto" />
    <span class="font-black text-xl">{{ appName }}</span>
  </div>
</template>

<style scoped>
</style>

Steps to reproduce

  1. Create components/AppHeaderLogo.vue
  2. Add custom template as shown above
  3. Run dev server
  4. Observe that the header still uses the default logo component

Question

Is there anything specific required to override built-in Docus components like AppHeaderLogo?
For example:

  • Is there a naming or registration constraint?
  • Or do I need to explicitly register/extend it via config?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions