Get your own Vue server
  <h1>Scoped Slots</h1>
  <p>App.vue controls how local data from the scoped slot is rendered.</p>
  <slot-comp v-slot="food">
    <h2>{{ food.foodName }}<img :src=food.foodUrl></h2>
    <p class="greenP">{{ food.foodDesc }}</p>


  #app {
    width: 300px;
  h2, .greenP {
    background-color: lightgreen;
    padding: 10px;
    margin: 0;
  img {
    float: right;
    height: 70px;
    margin-left: 10px;
    v-for="x in foods" 

export default {
    data() {
        return {
            // foods: ['Apple','Orange','Lemon','Beetle']
            foods: [
                { name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
                { name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
                { name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
                { name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
                { name: 'Cake', desc: 'Cake is something sweet that tates good but is not consodered healthy.', url: 'img_cake.svg' }

import { createApp } from 'vue'

import App from './App.vue'
import SlotComp from './components/SlotComp.vue'

const app = createApp(App)
app.component('slot-comp', SlotComp)