My Nuxt Vue component is rendering twice help

hello, My header component is rendering twice in my layout pages. I checked every page and the code and layout seems to be correct… when I check Vue dev tools, I see that there are two header components rendering… not sure what the issue is…

Hello @ainneo, it might be easier for others to help you if we had the ability to see some of your code. Then we might be able to troubleshoot it better.

here is my App Header code

<template v-else-if="pageData">
  <div class="header">
      <div class="main-header">
        <div class="container">
          <h1 class="logo">
            <a href="https://www.pxlagency.com/">
              <div class="logo-letter">
                <img src="../assets/svg/pxl-logo-p.svg" />
              </div>
              <div class="logo-letter">
                <img src="../assets/svg/pxl-logo-x.svg" />
              </div>
              <div class="logo-letter">
                <img src="../assets/svg/pxl-logo-l.svg" />
              </div>
            </a>
          </h1>
          <nav class="main-nav">
            <ul class="nav-links">
              <li><nuxt-link to="/our-work">Our Work</nuxt-link></li>
              <li><nuxt-link to="/who-we-are">Who We Are</nuxt-link></li>
              <li class="dropdown"><nuxt-link to="/what we do">What We Do</nuxt-link>
                <div class="dropdown-content">
                  <li><nuxt-link to="/">Creative</nuxt-link></li>
                  <li><nuxt-link to="/">Strategy</nuxt-link></li>
                  <li><nuxt-link to="/">Technology</nuxt-link></li>
                </div>
              </li>
              <li><nuxt-link to="/pxl products">PXL Products</nuxt-link></li>
              <li><nuxt-link to="/contact">Contact</nuxt-link></li>
            </ul>

            <!-- <button class="header__mobile-toggle">
              <div class="menu-open">
                <div class="menu-open__bar"></div>
                <div class="menu-open__bar"></div>
              </div>
              <div class="menu-close">
                x
              </div>
            </button> -->

          </nav>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'AppHeader'
};


</script>
1 Like

here is my default code from layouts:

  <div class="page-container">
    <!-- Loading -->
    <div v-if="isLoadingPageData">
      Loading...
    </div>
    <!-- Error -->
    <div v-else-if="loadPageDataError">
      Something went wrong.
    </div>
    <AppHeader />
    <nuxt class="page-content" />
    <AppFooter />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AppHeader from '../components/AppHeader'
import AppFooter from '../components/AppFooter'

export default {
  components: {
    AppHeader,
    AppFooter
    },

  computed: {
    ...mapState([
      'isLoadingPageData',
      'loadPageDataError',
      'pageData'
    ])
  },

  head () {
    return {
      link: [
        { rel: 'canonical', href: `${process.env.BASE_URL}${this.$route.path === '/' ? '' : this.$route.path}` }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  min-height: 100%;
  // height: 100vh;
}
</style>
1 Like

I can’t see anything that could possibly be wrong. Please let us know if you make any headway. I can’t find anything when I Google for the problem. Everything looks like it should be working. Maybe there is an issue with the Vue dev tools. Probably not, but it’s worth checking out? Try console logging whenever the component mounts maybe?

i think it has to do with my api… i connected to a headless wordpress cms… still trying to figure it out

Is it impacting performance at all?

yes it’s working… I still have alot of bugs I am learning how to fix…

how to log in into class mrs.ainneo