Get your own Vue server
App.vue
SlotComp.vue
main.js
 
<template>
  <hr>
  <h3>Component</h3>
  <div>
    <slot name="topSlot">Fallback content for 'topSlot'</slot>
  </div>
  <div>
    <slot name="bottomSlot">Fallback content for 'bottomSlot'</slot>
  </div>
  <div id="resultDiv">
    <p><em>{{ slotsText }}</em></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotsText: null
    }
  },
  mounted(){
    if(this.$slots.topSlot){
      this.slotsText = "Content for the 'topSlot' slot is provided by the parent."
    }
    else {
      this.slotsText = "Content for the 'topSlot' slot is NOT provided by the parent."
    }
  }
}
</script>

<style scoped>
div {
  width: 80%;
  border: dotted black 1px;
  margin: 10px;
  padding: 10px;
  background-color: lightgreen;
}
#resultDiv {
  background-color: white;
}
</style>                  
http://localhost:5173/