Only Show Slot If It Has Content

Use v-if and $slots in your child component

In Vue 2 or Vue 3 (Options API), you can check if the slot has content using this.$slots.default.

Explanation:

• v-if=”$slots.default” checks if the default slot has been passed content.
• This prevents the from rendering if nothing was passed in the parent.

Example:

Parent Component

Child Component

• The first ChildComponent will render the slot content.
• The second ChildComponent will render nothing inside the div, because there’s no slot content.

Notes:

• This works for default slots. For named slots, you can use $slots[‘name’].
• In script setup (Vue 3 Composition API), you can use useSlots():

Also Read:

VueJs Projects