<template> <h3>Slots Fallback Content</h3> <p>A component without content provided can have fallback content in the slot tag.</p> <slot-comp> <!-- Empty --> </slot-comp> <slot-comp> <h4>This content is provided from App.vue</h4> </slot-comp> </template> <script></script> <style> #app div { width: 150px; } h4 { text-align: center; } </style>

 <template> <div> <slot> <h4>This is fallback content</h4> </slot> </div> </template> <script></script> <style scoped> div { background-color: lightgreen; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; flex-basis: 150px; border-radius: 10px; border: solid black 2px; margin: 10px; padding: 0px 10px 0 10px; } div:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } h4 { color: rgb(159, 0, 0); } </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')