In Vue.js, the <slot> element is used to serve as distribution outlets for content.

Let’s take an example to create an alert component with slots for content insertion.

Example:

In Vue.js, the <slot> element is used to serve as distribution outlets for content.

Let’s take an example to create an alert component with slots for content insertion.

Example:

1. Vue.component(‘alert’, {  
2.   template: `  
3.     <div class=”alert-box”>  
4.       <strong>Error!</strong>  
5.       <slot></slot>  
6.     </div>`  
7. })  

We can insert dynamic content as follows:

1. <alert>  
2.   There is an issue with in application.  
3. </alert>