<template> <h1>App.vue</h1> <p>The component has two div tags with one slot in each.</p> <slot-comp> <template v-slot:bottomSlot> <h4>To the bottom slot!</h4> <p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p> </template> <p>This goes into the default slot</p> </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 { width: 50%; border: dotted black 1px; margin: 10px; padding: 10px; background-color: lightgreen; } </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')