Nuxt•2y ago

Content is being rendered even after the end of page

This is my layouts\default.vue

<script setup lang="ts">
  import FooterSection from '~/components/FooterSection.vue';
  import NavSection from '~/components/NavSection.vue';
</script>

<template>
  <div
    class="relative flex min-h-screen flex-col items-stretch justify-between"
  >
    <nav-section class="drop-shadow" />

    <div>
      <slot />
    </div>

    <footer>
      <responsive-section
        class="bg-custom-dark text-custom-light"
      >
        <template #section-content>
          <footer-section />
        </template>
      </responsive-section>
    </footer>
  </div>
</template>

<script setup lang="ts">
  import FooterSection from '~/components/FooterSection.vue';
  import NavSection from '~/components/NavSection.vue';
</script>

<template>
  <div
    class="relative flex min-h-screen flex-col items-stretch justify-between"
  >
    <nav-section class="drop-shadow" />

    <div>
      <slot />
    </div>

    <footer>
      <responsive-section
        class="bg-custom-dark text-custom-light"
      >
        <template #section-content>
          <footer-section />
        </template>
      </responsive-section>
    </footer>
  </div>
</template>

This is my app.vue

<template>
  <nuxt-layout>
    <nuxt-page />
  </nuxt-layout>
  <div>
    Hello
  </div>
</template>

<template>
  <nuxt-layout>
    <nuxt-page />
  </nuxt-layout>
  <div>
    Hello
  </div>
</template>

Since the app.vue ends with

<div>
    Hello
  </div>

<div>
    Hello
  </div>

there should not be any content after it, right? But there is. Why?

2 Replies

YouDontKnowMeOP•2y ago

This is what it looks like in inspector. The <div id="__nuxt">...</div> contains all the content that should be rendered. Everything after that is extraneous.

YouDontKnowMeOP•2y ago

What in the name of Middle Earth is going on here? Anyone? Could use some help with this Resolved

Gaming

Programming

Content is being rendered even after the end of page