Unlocking Conditional Component Rendering with Vue.js Slots
Tags: vue, webdev, javascript
Published: 2023-05-22 08:07:00

## Introduction

Vue.js is a powerful framework that allows developers to build interactive and flexible user interfaces. One of its notable features is the ability to work with slots, which enable the creation of reusable components. In this guide, we will explore how to leverage Vue.js conditional slots to create dynamic layouts that adapt based on the parent's usage of specific slots.

## Prerequisites

Before we dive into conditional slots, make sure you have a basic understanding of Vue.js and its component-based architecture. Familiarity with HTML and JavaScript will also be beneficial. We will use **Vue.js 3** here. Some knowledge of TypeScript is recommended, but not mandatory.

### Creating the Slotted Component

To begin, let's create a slotted component that will serve as the container for our conditional slots. In this example, we'll call it `Card`. Here's a basic template for the component:

```vue
<!-- ./components/Card.vue -->
<template>
  <div class="card">
    <div v-if="$slots.annotated" class="annotation">
      <slot name="annotated" />
    </div>
    <slot />
  </div>
</template>

<style>
/* some basic styling */
.card {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}

.annotation {
  background-color: lightblue;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
</style>
```

#### Explanation

1. We define the parent component with the class `.card` as the container. It has a border and padding to provide a basic visual structure.
    
2. Using `v-if="$slots.annotated"`, we check if the parent component uses the `annotated` slot. If it does, the `annotation` div will be rendered.
    
3. Inside the `annotation` div, we use `<slot name="annotated" />` to define the location where the content of the `annotated` slot will be inserted.
    
4. The `.annotation` class applies a background color and padding to visually distinguish the annotated content.
    

### Understanding the `$slots` variable

The `$slots` variable is automatically available within a Vue.js component and represents an object that holds the component's slots. The `$slots` object has properties corresponding to each slot's name, allowing you to conditionally render content based on the existence of a specific slot.

To learn more about slots in Vue.js, you can visit the following links:

* [**Vue.js Documentation: Slots**](https://vuejs.org/guide/components/slots.html): This document provides detailed information about slots in Vue.js, including default slots, named slots, and scoped slots.
    
* [**Vue.js Documentation: $slots**](https://vuejs.org/api/component-instance.html#slots): Here, you can find the documentation specifically for the `$slots` variable in Vue.js, which explains its usage and provides examples.
    

### Using the Slotted Component

Now that we have our slotted component defined, let's see how we can utilize the conditional slot. We will use the component within our `App.vue` file:

```vue
<!-- App.vue -->
<script setup lang="ts">
import Card from './components/Card.vue';
</script>

<template>
  <Card>
    Without Annotation.<br />
    Note that no extra styling was applied.
  </Card>
  <Card>
    <template #annotated>With Annotation</template>
    But this is without annotation again.
  </Card>
</template>
```

1. In the `<script setup>` section, we import the `Card` component. **Note that we utilize the Composition API's** `<script setup>`**, which you can read more about** [here](https://vuejs.org/api/sfc-script-setup.html#script-setup)**.**
    
2. Inside the `<template>` section, we use the `Card` component by placing it within the template. We have two instances of the `Card` component.
    
3. **Without Annotation**: The first instance of the `Card` component is used without an `annotated` slot. **Note that no extra styling is applied.**
    
4. **With Annotation**: The second instance of the `Card` component includes the `annotated` slot. We define the content for the slot using `<template #annotated>`. **Note the styling applied.**
    

### The Results

{% stackblitz https://stackblitz.com/edit/node-jeldaf?terminalHeight=0&file=src%2FApp.vue&embed=1 %}

### **Conclusion**

In this tutorial, we have explored the concept of conditional slots in Vue.js and learned how to utilize them effectively. Conditional slots provide a powerful mechanism for dynamic component rendering and styling, allowing the parent component to selectively render specific content within the child component based on given conditions. By leveraging this feature, you can create more flexible and reusable components in your Vue.js applications.

Remember, conditional slots are just one of the many powerful features Vue.js offers. It's always a good idea to explore the [official Vue.js documentation](https://vuejs.org/) and experiment with different features to further enhance your understanding and proficiency in building robust web applications.