Slots

<!-- ButtonComponent.vue -->
<template>
  <button class="btn">
    <slot></slot>
  </button>
</template>

<template>
  <ButtonComponent>
    Click me!
  </ButtonComponent>
</template>

<button class="btn">
  Click me!
</button>

<template>
  <button>
    <slot>Submit</slot> <!-- fallback content -->
  </button>
</template>

<!-- With content -->
<ButtonComponent>Save</ButtonComponent>
<!-- Renders: <button>Save</button> -->

<!-- Without content -->
<ButtonComponent />
<!-- Renders: <button>Submit</button> -->

<!-- Layout.vue -->
<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- default slot -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<template>
  <Layout>
    <template #header>
      <h1>Page Title</h1>
    </template>

    <p>Main content goes here</p>

    <template #footer>
      <p>Footer content</p>
    </template>
  </Layout>
</template>

<!-- Full syntax -->
<template v-slot:header>
  <h1>Header</h1>
</template>

<!-- Shorthand -->
<template #header>
  <h1>Header</h1>
</template>

<!-- ItemList.vue -->
<script setup>
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]
</script>

<template>
  <div v-for="item in items" :key="item.id">
    <slot :item="item" :index="index"></slot>
  </div>
</template>

<template>
  <ItemList>
    <template #default="{ item, index }">
      <div>{{ index }}: {{ item.name }}</div>
    </template>
  </ItemList>
</template>

<!-- Table.vue -->
<template>
  <table>
    <thead>
      <slot name="header" :columns="columns"></slot>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <slot name="row" :row="row"></slot>
      </tr>
    </tbody>
  </table>
</template>

<Table>
  <template #header="{ columns }">
    <tr>
      <th v-for="col in columns" :key="col">{{ col }}</th>
    </tr>
  </template>
  
  <template #row="{ row }">
    <td>{{ row.name }}</td>
    <td>{{ row.value }}</td>
  </template>
</Table>

export type Slot<T extends any = any> = (
  ...args: IfAny<T, any[], [T] | (T extends undefined ? [] : never)>
) => VNode[]

export type Slots = Readonly<{
  [name: string]: Slot | undefined
}>

export type SlotsType<T extends Record<string, any> = Record<string, any>> = {
  [SlotSymbol]?: T
}

<script setup lang="ts">
import type { SlotsType } from 'vue'

interface Item {
  id: number
  name: string
}

defineSlots<{
  default(props: { item: Item }): any
  header(props: { title: string }): any
  footer(): any
}>()
</script>

import { defineComponent, SlotsType } from 'vue'

interface Item {
  id: number
  name: string
}

export default defineComponent({
  slots: Object as SlotsType<{
    default: { item: Item }
    header: { title: string }
    footer: {}
  }>,
  setup(props, { slots }) {
    // slots are typed
    slots.default?.({ item: { id: 1, name: 'Item' } })
  }
})

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

// Check if slot exists
if (slots.header) {
  console.log('Header slot provided')
}

// Render slot programmatically
const headerContent = slots.header?.()
</script>

export default {
  mounted() {
    console.log(this.$slots.default())
  }
}

<script setup>
const slotName = ref('header')
</script>

<template>
  <BaseLayout>
    <template #[slotName]>
      <h1>Dynamic slot content</h1>
    </template>
  </BaseLayout>
</template>

<!-- Child.vue -->
<script setup>
import { useSlots } from 'vue'

const slots = useSlots()
const hasHeader = computed(() => !!slots.header)
</script>

<template>
  <div>
    <div v-if="hasHeader" class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

const normalizeSlot = (
  key: string,
  rawSlot: Function,
  ctx: ComponentInternalInstance | null | undefined,
): Slot => {
  if ((rawSlot as any)._n) {
    // already normalized
    return rawSlot as Slot
  }
  const normalized = withCtx((...args: any[]) => {
    return normalizeSlotValue(rawSlot(...args))
  }, ctx) as Slot
  return normalized
}

<!-- Mouse.vue -->
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

<template>
  <slot :x="x" :y="y"></slot>
</template>

<Mouse v-slot="{ x, y }">
  <p>Mouse position: {{ x }}, {{ y }}</p>
</Mouse>

export type RawSlots = {
  [name: string]: unknown
  $stable?: boolean
}

export type RawSlots = {
  // indicates compiler generated slots
  _?: SlotFlags
}

<script setup>
import { useSlots } from 'vue'
import ChildComponent from './Child.vue'

const slots = useSlots()
</script>

<template>
  <div class="wrapper">
    <ChildComponent>
      <template v-for="(_, name) in slots" #[name]="slotProps">
        <slot :name="name" v-bind="slotProps"></slot>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- Accordion.vue -->
<template>
  <div class="accordion">
    <slot name="item" v-for="item in items" :item="item">
      <!-- Nested slots -->
      <slot name="item-header" :item="item"></slot>
      <slot name="item-content" :item="item"></slot>
    </slot>
  </div>
</template>

<script setup>
import { useSlots, h } from 'vue'

const slots = useSlots()

function wrappedSlot(slotProps) {
  const content = slots.default?.(slotProps)
  return h('div', { class: 'wrapped' }, content)
}
</script>

<script setup>
const items = ref([...])
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <slot :item="item" :index="index">
        {{ item.name }}
      </slot>
    </li>
  </ul>
</template>

<template>
  <div class="modal">
    <div class="modal-header">
      <slot name="header"></slot>
      <button @click="close">×</button>
    </div>
    <div class="modal-body">
      <slot></slot>
    </div>
    <div class="modal-footer">
      <slot name="footer">
        <button @click="close">Close</button>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)
const loading = ref(false)
const error = ref(null)

const props = defineProps(['url'])

onMounted(async () => {
  loading.value = true
  try {
    data.value = await fetch(props.url).then(r => r.json())
  } catch (e) {
    error.value = e
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <slot :data="data" :loading="loading" :error="error"></slot>
</template>