Nuxt•7mo ago

Nested duplicated component

Hi guys, I'm returning to development in vue after a long pause. I decided to start a personal project with nuxt and encountered this problem right after I started development. The problem is that the NavBar component is somehow duplicated inside itself with no aparent reason. As you can see in the image. I'm also getting a Hydration mismatch as seen in the image. Here is the repository so you can see everything https://github.com/Ozai98/muur There is no routing implemented yet, so just access the Info page by doing localhost:3000/Info

GitHub

GitHub - Ozai98/muur: Repository for the development of muur design...

Repository for the development of muur design services web page - Ozai98/muur

2 Replies

Vida•7mo ago

The problem in your code is that app.vue has duplicate templates:

<template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
  <template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
    <NuxtPage />
  </template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
</template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
<script setup lang="ts"></script>
<style scoped>
html {
  font-size: 16px;
}
</style>

<template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
  <template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
    <NuxtPage />
  </template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
</template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
<script setup lang="ts"></script>
<style scoped>
html {
  font-size: 16px;
}
</style>

After removing that your application sould render only one NavBar. I also noticed in your page Info.vue you attempt to import the navbar. In these new nuxt versions there is no need to import. Components are auto imported so its enough if you reduce the code to :

<template lang="html">
  <NavBar />
</template>

<template lang="html">
  <NavBar />
</template>

OzaiOP•6mo ago

I see, thank you so much!

Gaming

Programming

Nested duplicated component