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

KPCKevin Powell - Community

•Created by YouDontKnowMe on 3/24/2024 in #front-end

Fixing overflow issues in nested components of NextJS

On the test page of this demo, the div with Hello Worlds should have vertical scrolling. However, the scrolling appears for the entire page instead. https://stackblitz.com/edit/stackblitz-starters-l38e7q?file=app%2Fpage.tsx,app%2Ftest%2Fpage.tsx

4 replies

KPCKevin Powell - Community

•Created by YouDontKnowMe on 3/16/2024 in #front-end

Vertical scrolling without using absolute height

8 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

KPCKevin Powell - Community

•Created by YouDontKnowMe on 5/8/2023 in #front-end

Positioning elements

32 replies

Gaming

Programming