Docus not accepting app header component
Hello
I am trying to create a custom logo in a Docus 4 project. It is a fully new project where only the AppHeaderLogo component has been added. I have tried adding a component folder both in root and app/ and nothing happens. What could be wrong?
2 Replies
Hi @isakwang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, here are some things to check when your custom
In Nuxt 4, the default directory for components is
Nuxt automatically imports components from the
If your component is in a nested directory, its name will be based on its path. For example,
Only files with extensions specified in the
If you want to add a custom components directory, you must add it to the
Sometimes, Nuxt does not pick up new files until you restart the development server. Example: Correct Structure And in your template: If you have followed all these steps and the component is still not recognized, the knowledge sources do not provide further Docus-specific troubleshooting steps. You may want to check Docus documentation or ensure there are no typos or build errors. Let me know if you need more specific help with your configuration! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
AppHeaderLogo component is not being recognized in your Docus 4 (Nuxt 4) project:
1. Component Directory PlacementIn Nuxt 4, the default directory for components is
app/components/, not the project root. If you are using the new directory structure, make sure your component is in app/components/AppHeaderLogo.vue. If you are using the old structure, it should be in components/AppHeaderLogo.vue at the root. The ~ alias now points to app/ by default, so ~/components resolves to app/components/ New Directory Structure.
2. Component Auto-ImportNuxt automatically imports components from the
components/ directory. You do not need to import them manually if they are in the correct directory and you are not using custom configuration that disables auto-imports components directory.
3. Component NamingIf your component is in a nested directory, its name will be based on its path. For example,
components/base/foo/AppHeaderLogo.vue would be used as <BaseFooAppHeaderLogo />. If you want to use <AppHeaderLogo /> regardless of its path, set pathPrefix: false in your nuxt.config.ts Component Names.
4. File ExtensionOnly files with extensions specified in the
extensions key of nuxt.config.ts are treated as components. By default, .vue is supported. If you use another extension, update your config accordingly Component Extensions.
5. Custom DirectoriesIf you want to add a custom components directory, you must add it to the
components array in nuxt.config.ts Custom Directories.
6. Restart the Dev ServerSometimes, Nuxt does not pick up new files until you restart the development server. Example: Correct Structure And in your template: If you have followed all these steps and the component is still not recognized, the knowledge sources do not provide further Docus-specific troubleshooting steps. You may want to check Docus documentation or ensure there are no typos or build errors. Let me know if you need more specific help with your configuration! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@234270188906741761> Kapa.ai is still learning and improving, please let me know how I did by reacting below.