Vue/Nuxt app is rendering content (not components, just content) twice on every page-CodePudding

I am very new to Vue/Nuxt programming and followed a "add a blog" tutorial which I then modified for my site. It all works perfectly except the actual it is rendering content twice. It renders NavPage (component) > content > FooterDiv(component) then content again. See image: Image of the page showing duplicated content

This happens on every page.

I am including my blogpage code ecasue in testing it seems to be where the problem lives :

 <template>
  <div>
    <div >
      <h2>Latest Posts</h2>
      <div >
        <div  v-for="article of articles" :key="article.slug">
          <nuxt-link :to="{ name: 'slug', params: { slug: article.slug } }">
            <div >
              <img :src="require(`~/assets/resources/${article.img}`)" alt="" />
              <div >
                <h3>{{ article.title }}</h3>
                <p>{{ article.description }}</p>
              </div>
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>

</template>


<script>

export default {

  name: "BlogPage",
  data() {
    return {
      name: ''
    }
  },

  mounted() {
    let user = localStorage.getItem('user-info');
    if (!user) {
      this.$router.push({ name: "BlogPage" })
    }
  },
  async asyncData({ $content, params }) {
    const articles = await $content('articles', params.slug)
      .only(['title', 'description', 'img', 'slug'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      articles    
    }
  }
}

I have also included the structure being rendered by Vue per the Vue Dev Tools This image is what I see in the dev tools when the page is rendered

I have spent hours troubleshooting this and can find no other info on the issue.

Thank you for any help, and your patience with a newbie. Let me know if you need to see any other code.

As requested here is my NavPage component code:

 <template>

 <!-- Navigation-->
        <nav  id="mainNav">
            <div >
                <a  href="#page-top">Denise Pedro</a>
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i ></i>
                </button>
                <div  id="navbarResponsive">
                    <ul >
                        <li > <NuxtLink to="/">Home</NuxtLink></li>
                        <li > <NuxtLink to="/PortfolioPage">Portfolio</NuxtLink></li>
                        <li > <NuxtLink to="/ResumePage">Resume</NuxtLink></li>
                        <li >  <NuxtLink to="/ContactPage">Contact</NuxtLink></li>
                        <li >  <NuxtLink to="/BlogPage">Blog</NuxtLink></li>
                         
                     </ul>
                </div>
            </div>
        </nav>

</template>

and my FooterDiv component

   <template>


 <!-- Footer-->
        <footer >
            <div >
                <div >
                    <!-- Footer Location-->
                    <div >
                        <h4 >Location</h4>
                        <p >
                            Seattle through Olympia, WA
                            <br />
                            
                        </p>
                    </div>
                    <!-- Footer Social Icons-->
                    <div >
                        <h4 >Around the Web</h4>
                        <!-- <a  href="#!"><font-awesome-icon icon="fa-brands fa-facebook" /></a> -->
                        <a  href="#!"><img src="../assets/img/facebook-brands.svg" alt="facebook icon" /></a>
                        <a  href="#!"><img src="../assets/img/twitter-brands.svg" alt="twitter icon"/></a>
                        <a  href="#!"><img src="../assets/img/linkedin-in-brands.svg" alt="linkedin icon"/></a>

                    </div>
                    <!-- Footer About Text-->
                    <div >
                        <h4 >Denise Pedro</h4>
                        <p >
                           [email protected]
                            <!-- <a href="http://startbootstrap.com">Start Bootstrap</a> -->
                        </p>
                    </div>
                </div> 
                </div>
        </footer>
    </template>

and lastly, my layout code

   <template>
  <div>
    <NavPage />
    <Nuxt />
    <FooterDiv />
    <Nuxt /> 
  </div>
</template>

<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {

  components: {
    NavPage,
    FooterDiv
  },
}
</script>

Thank you

CodePudding user response：

In your layout, you've put </Nuxt> twice, that's why the page content is duplicated, you should remove it. your layout.vue should look like that:

<template>
  <div>
    <NavPage />
    <Nuxt />
    <FooterDiv />
  </div>
</template>

<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'

export default {
  components: {
    NavPage,
    FooterDiv
  },
}
</script>