Customizing Theme Issues

[PrimalOutshoot]

I am new to both Nuxt and Docus theme. I don't know how to customize the themes.

The main page of docus says the theme is customizable with the words:

"Extensible. Customize the whole design, or add components using slots - you can make Docus your own."

1. Add a top navigation globally since docus does not come with one.
2. Add Padding to page-body content WHEN Aside is disabled

Customizing the style.css adds padding globally, but

I tried creating a component in layouts/customdefault.vue

<template>
    <DocsPageLayout :has-aside="false">
      <!-- Here you could add your top navigation slot if it's allowed by the original component -->
      <template #TopNav>
        <Navbar />
      </template>
      <slot />
    </DocsPageLayout>
  </template>

  <script>
  import DocsPageLayout from '@nuxt-themes/docus/components/app/docs/DocsPageLayout.vue';
  import Navbar from '~/components/Navbar.vue'; 

  export default {
    components: {
      DocsPageLayout,
      Navbar
    }
  };
  </script>

<style scoped>
.page-body {
  padding: 1rem;
}
</style>

and then using frontmatter or _dir.yaml to select the layout: customdefault, but my layout doesn't register. Even when it is as simple as HELLO WORLD. There does not seem to be any guidance on how to actually override or extend this themes layout. I do not know what to do and support for the theme seems to be limited. Hoping someone in the community could offer some guidance?

[dshuais]

Do you have a plan ?

[NicolasDurant]

I haven't tried so far to add a new custom layouts, but I had to override the default one and some of the default components in our docus theme. You can do this by matching exactly their directory structure and component naming. Creating layouts/default.vue or layouts/page.vue in your root, will override those layouts. I advise you to simply copy the components from e.g. node_modules/@nuxt-themes/docus/layouts/default.vue first, so you don't break functionality and then extend the code to your need. Hope that might help someone.