<template> <h1>App.vue</h1> <p>The component has two &lt;div&gt; tags with one &lt;slot&gt; in each.</p> <slot-comp v-slot:default>'Default slot'</slot-comp> </template> <script></script> <style> #app { width: 300px; } </style>

 <template> <h3>Component</h3> <div> <slot></slot> </div> <div> <slot name="bottomSlot"></slot> </div> </template> <script></script> <style scoped> div { height: 30px; width: 50%; border: dotted black 1px; margin: 10px; padding: 10px; background-color: lightgreen; font-weight: bold; } </style>

 import { createApp } from 'vue' import App from './App.vue' import SlotComp from './components/SlotComp.vue' const app = createApp(App) app.component('slot-comp', SlotComp) app.mount('#app')