useSlots()

Accesses the component's slots programmatically in setup.

Since Vue 3.0 Spec ↗

Syntax

const slots = useSlots()

Returns

Slots — Object whose keys are slot names mapping to render functions.

Examples

<script setup lang="ts">
import { useSlots, computed } from 'vue';

const slots = useSlots();
const hasFooter = computed(() => !!slots.footer);
</script>

<template>
  <slot />
  <footer v-if="hasFooter"><slot name="footer" /></footer>
</template>

Notes

Equivalent to setupContext.slots, useful when you need slots in script logic (e.g. conditional rendering or render functions). In templates use the `<slot>` element directly. Each slot is a function returning vnodes.