Overriding the default TheHeader.view component does not work

Version

@nuxt/content-theme-docs": “^0.8.0”, “nuxt”: “^2.14.7”,

Reproduction Link

GitPod

Steps to reproduce

• yarn
• yarn dev

What is Expected?

TheHeader.vue Component Should be working.

<template>
  <header
    class="sticky top-0 left-0 right-0 z-30 bg-light-elevatedSurface dark:bg-dark-elevatedSurface h-16 lg:h-24 transition-colors duration-300 ease-linear"
    :class="{ shadow: !onTop, 'shadow-reverse': onTop }"
  >
    <div
      class="container relative mx-auto px-4 flex items-center justify-between lg:py-6 h-full"
    >
      <NuxtLink to="/">
        <img v-if="$config.logo" class="h-10 max-w-full" :src="$config.logo" />

        <template v-else-if="$config.logoLight && $config.logoDark">
          <img
            :src="$config.logoLight"
            class="h-10 max-w-full light-img"
            height="100"
          />
          <img
            :src="$config.logoDark"
            class="h-10 max-w-full dark-img"
            height="100"
          />
        </template>

        <AppLogo
          v-else-if="$options.components['AppLogo']"
          class="text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary transition-colors duration-300 ease-linear"
        />
      </NuxtLink>

      <div v-if="$config.showSocialIconsOnHeader" class="dark:text-white flex">
        <a
          v-if="$config.linkedinUsername"
          :href="`https://www.linkedin.com/in/${$config.linkedinUsername}`"
          target="_blank"
          class="hidden sm:block ml-3"
          rel="noopener"
          aria-label="linkedin"
        >
          <IconLinkedin class="w-6 h-6" />
        </a>

        <a
          v-if="$config.twitterUsername"
          :href="`https://twitter.com/${$config.twitterUsername}`"
          target="_blank"
          class="hidden sm:block ml-8"
          rel="noopener"
          aria-label="twitter"
        >
          <IconTwitter class="w-6 h-6" />
        </a>

        <a
          v-if="$config.githubOwner"
          :href="`https://github.com/${$config.githubOwner}`"
          target="_blank"
          class="hidden sm:block ml-3"
          rel="noopener"
          aria-label="github"
        >
          <IconGithub class="w-8 h-8" />
          <a
          v-if="$config.githubOwner"
          :href="`https://github.com/${$config.githubOwner}`"
          target="_blank"
          class="hidden sm:block ml-3"
          rel="noopener"
          aria-label="github"
        >
          <IconGithub class="w-8 h-8" />
        </a>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      onTop: true,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.onTop = window.pageYOffset < 60
    },
  },
}
</script>

What is actually happening?

TheHeader.vue Component Not Working

[akshgpt7]

For anyone looking how to override components of the theme:

So basically, you need to create a components/ folder in the root of your project. Inside it, add the components you want to override with the same name as the original (ignore sub-directories). For example, components/AppNav.vue will override the AppNav.vue component of the theme.

In your nuxt.config.js file:

export default theme({
  components: [
    './components', // default level is 0
    { path: '~~/node_modules/@nuxt/content-theme-docs/src/components/', level: 1 }
  ],
  docs: {
    primaryColor: "#33cb9a",
   .
   .
   .
  },
});

[ArsalaBangash]

To clarify, TheHeader.vue is not displaying two Github links as per the code