Only show slot if it has content with Vue.js

In this article, we will see how to only show slots if it has content and hides the empty slot in Vue.

In Vue, the slot allows us to insert content from a parent component into a child component. It helps us to create reusable components in Vue.

Here, we will see how we can conditionally hide or show Vue slot element based on if the slot has content or not.

Let’s see with an example how to do it.

Let’s say we have a child component called FancyBox.vue with two named slots like this.

<template>
  <div class="fnacy-box">
    <div class="red">
      <slot name="redBox"></slot>
    </div>
    <div class="green">
      <slot name="greenBox"></slot>
    </div>
  </div>
</template>

One slot is named redBox and the other one is named greenBox. I have also added two classes ‘red’ and ‘green’ to add some CSS style.

Now we can insert content to these two slots from the parent component.

<template>
  <div id="app">
    <FancyBox>
      <template v-slot:redBox> This is a red box </template>
      <template v-slot:greenBox> This is a green box </template>
    </FancyBox>
  </div>
</template>

So both the slot elements will be rendered to our page like this

Next, let’s see what happens when we don’t insert any content to one of the slots, here we will keep the slot named greenBox empty.

<template>
  <div id="app">
    <FancyBox>
      <template v-slot:redBox> This is a red box </template>
      <template v-slot:greenBox></template>
    </FancyBox>
  </div>
</template>

We will see this on our page.

As you can see, although we have not inserted any content in the greenBox slot, still the element gets rendered on our web page.

So how can we hide the empty slot and show only the slot which has content?

Well, for that we can use the $slots property in our Vue component.

In Vue, every component has a $slots object that contains all of our slots in it. And since we are using a named slot in our example, so the name will be the key of the slot in the object.

The $slots property is an object with keys that are equal to the slots name which has content in it.

So, to check if a slot has content in it, we can use the $slot.<slot-name> property, this will return us a boolean. If it returns, true, that means the slot has content in it, if not it will return false.

Let’s check with the above example.

<template>
  <div class="fnacy-box">
    <div class="red">
      <slot name="redBox"></slot>
    </div>
    <div class="green" v-if="$slots.greenBox">
      <slot name="greenBox"></slot>
    </div>
  </div>
</template>

Here, we have used the v-if statement with $slot.greenBox, to check if the slot is empty or not.

And since we are using v-if in the div, if the $slot.greenBox returns false, the div will not be rendered on the parent component.

If we insert any content from the parent component, v-if will be true, and the greenBox slot will be rendered on the page.

Now if we do not set any content to the greenBox slot from the parent component.

<FancyBox>
    <template v-slot:redBox> This is a red box </template>
    <template v-slot:greenBox></template>
</FancyBox>

Then only the red box on our web page gets rendered.

DEMO CODE:

So this is how you can check if a slot is empty or not using the $slots property in Vue js.