Is Vue not smart enough to avoid rendering in this scenario with

!-- --> template> div> h2>Here are If we don't use the v-if , we would end up with an empty and unnecessary div if we didn't have a slot

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

vue check if slot is empty Just for the record: useSlots() returns an object where the keys are the names of the slots The unnamed slot has the default key

vue slot ref If we pass multiple components to a child component, one is a named slot The other is an unnamed slot will use the unnamed one as the