Get your own Vue server Result Size: 625 x 565
App.vue
SlotComp.vue
main.js
 
<template>
  <h1>Named Scoped Slots</h1>
  <p>Named scoped slots "leftSlot" and "rightSlot" send different data to App.vue from the SlotComp.vue component.</p>
  <hr>
  <slot-comp>
    <template #leftSlot="leftProps">
      <div>{{ leftProps.text }}</div>
    </template>
    <template #rightSlot="rightProps">
      <div>{{ rightProps.text }}</div>
    </template>
  </slot-comp>
</template>

<script></script>

<style>
  #app {
    width: 300px;
  }
  #app > div {
    display: inline-block;
    background-color: lightgreen;
    width: 100px;
    padding: 10px;
    margin: 10px;
  }
</style>                  
http://localhost:5173/