Get your own Vue server Result Size: 625 x 565
App.vue
SlotComp.vue
main.js
 
<template>
  <h2>Re-usable Slot Cards</h2>
  <p>We create card-like div boxes from the foods array.</p>
  <p>We also create a card-like footer by reusing the same component.</p>
  <div id="wrapper">
    <slot-comp v-for="x in foods">
      <img v-bind:src="x.url">
      <h4>{{x.name}}</h4>
    </slot-comp>
  </div>
  <footer>
    <slot-comp>
      <h3>Footer</h3>
    </slot-comp>
  </footer>
</template>

<script>
  export default {
    data() {
      return {
        foods: [
        { name: 'Apple', url: 'img_apple.svg'},
        { name: 'Pizza', url: 'img_pizza.svg'},
        { name: 'Rice', url: 'img_rice.svg'},
        { name: 'Fish', url: 'img_fish.svg'},
        { name: 'Cake', url: 'img_cake.svg'}
      ]
      }
    }
  }
</script>

<style>
  #wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  #wrapper > div {
    background-color: lightgreen;
  }
  footer > div {
    background-color: lightpink;
  }
  #wrapper img {
    display: block; 
    margin: 20% auto 0; 
    width: 60%;
  }
  h3, h4 {
    text-align: center;
  }
</style>                  
http://localhost:5173/