Nuxt•2mo ago

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?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Slots in Layout