YouDontKnowMe Posts - Answer Overflow

YouDontKnowMe

Explore posts from servers

•Created by YouDontKnowMe on 9/28/2024 in #❓・help

Slots in Layout

Here is my layouts/homepage.vue:

<template>
  <div
    class="flex min-h-screen w-full flex-col bg-gradient-to-b from-zinc-800 to-slate-950"
  >
    <div class="relative h-screen">
      <default-header class="absolute top-0 flex flex-col" />
      <div class="flex h-full flex-row">
        <slot></slot>
      </div>
    </div>
    <div>
      <slot name="content"></slot>
    </div>
    <div>
      <default-footer />
    </div>
  </div>
</template>

<template>
  <div
    class="flex min-h-screen w-full flex-col bg-gradient-to-b from-zinc-800 to-slate-950"
  >
    <div class="relative h-screen">
      <default-header class="absolute top-0 flex flex-col" />
      <div class="flex h-full flex-row">
        <slot></slot>
      </div>
    </div>
    <div>
      <slot name="content"></slot>
    </div>
    <div>
      <default-footer />
    </div>
  </div>
</template>

Here is my pages/index.vue:

<template>
  <section class="w-full">
    <hero-section />
  </section>
  <template #content>
    <div class="bg-white">Hello</div>
  </template>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "homepage",
});
</script>

<template>
  <section class="w-full">
    <hero-section />
  </section>
  <template #content>
    <div class="bg-white">Hello</div>
  </template>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "homepage",
});
</script>

Here is my app.vue:

<template>
  <NuxtLayout>
    <NuxtPage></NuxtPage>
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage></NuxtPage>
  </NuxtLayout>
</template>

However, this throws an error: [plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first. How do I populate the slot named content in the layout?

1 replies

NNuxt

•Created by YouDontKnowMe on 6/16/2023 in #❓・help

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?

6 replies

Gaming

Programming