You can check if a slot is empty, for example, only to render it if it is available or has content.
Check if a slot is empty
To check if a slot is empty, you can use $slots, an object representing the slots passed by the parent component.
Each slot is exposed on $slots as a function that returns an array of vnodes under the key corresponding to that slot's name. The default slot is exposed as $slots.default.
If a slot is a scoped slot, arguments passed to the slot functions are available to the slot as its slot props.
In the following example, the footer is only rendered if the slot with the name footer is present:
1<template>
2 <footer v-if="$slots.footer">
3 <h3>My Footer Heading</h3>
4 <slot name="footer" />
5 </footer>
6</template>Vue 2 Code
Of course, you can use that functionality in Vue 2 as well:1<template>
2 <footer v-if="showFooter">
3 <h3>My Footer Heading</h3>
4 <slot name="footer" />
5 </footer>
6</template>
7
8<script>
9export default {
10 data() {
11 return {
12 showFooter: false,
13 }
14 },
15 created() {
16 this.setShowSlots()
17 },
18 beforeUpdate() {
19 this.setShowSlots()
20 },
21 methods: {
22 setShowSlots() {
23 this.showFooter = this.$slots.footer?.[0]
24 },
25 },
26}
27</script>
useSlots composable
Usage of slots inside <script setup> should be relatively rare since you can directly access them as $slots in the template. In the rare case where you need them, you can use the useSlots composable:
1<template>
2 <footer v-if="showFooter">
3 <h3>My Footer Heading</h3>
4 <slot name="footer" />
5 </footer>
6</template>
7
8<script setup>
9import { useSlots } from 'vue'
10
11const slots = useSlots()
12const showFooter = () => {
13 return !!slots.footer
14}
15</script>Info
useSlots is a runtime function that returns the equivalent of setupContext.slots. You can use it in normal Composition API functions as well.
Check if a slot has content
In some cases, you probably want to check if the slot is not empty and has content inside.
You can do that by checking the array of vnodes, if they are empty or not:
1<script setup lang="ts">
2 import type { Slot, VNode } from 'vue'
3import { Comment, computed, Fragment, useSlots } from 'vue'
4
5const slots = useSlots()
6
7function isSlotAvailable() {
8 return !!slots?.footer
9}
10
11// Adapted from https://github.com/vuejs/vue-next/blob/ca17162e377e0a0bf3fae9d92d0fdcb32084a9fe/packages/runtime-core/src/helpers/renderSlot.ts#L77
12const isVnodeEmpty = (vnodes: Array<VNode>) => {
13 return vnodes.every((node: VNode) => {
14 if (node.type === Comment) {
15 return true
16 }
17
18 if (node.type === Text && typeof node.children === 'string' && !node.children.trim()) {
19 return true
20 }
21
22 if (
23 node.type === Fragment
24 && isVnodeEmpty(node.children as Array<VNode>)
25 ) {
26 return true
27 }
28
29 return false
30 })
31}
32
33const hasSlotContent = (slot: Slot<any> | undefined) => {
34 if (!slot) {
35 return false
36 }
37 return !isVnodeEmpty(slot())
38}
39</script>
40
41<template>
42 <div class="container">
43 <h3>Hello World</h3>
44 <span>isSlotAvailable: {{ isSlotAvailable() }}</span>
45 <span>hasSlotContent: {{ hasSlotContent(slots?.footer) }}</span>
46 <footer v-if="slots.footer">
47 <h3>My Footer Heading</h3>
48 <slot name="footer" />
49 </footer>
50 </div>
51</template>StackBlitz
The code for this tip is interactively available in the following StackBlitz project:
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
The v-memo directive is like a computed prop for the template.
Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay.