Vue component to create a grid of random icons

twitter-banner-grid.vue

<template>
  <div class="relative">
    <div class="grid">
      <div v-for="img in (cols * rows)" :key="img">
        <img :src="getRandomImg()" alt="icon" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup(props) {
    const cols = ref(40)
    const rows = ref(14)
    
    const imgs = [
      "https://nuxtjs.org/_nuxt/img/logo.d0868f5.svg",
      "https://docs.nestjs.com/assets/logo-small.svg",
      "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png",
    ];
    
    let prevIndex = 1
        
    function getRandomIndex () {
			const index = Math.floor(Math.random() * imgs.length)
      if (prevIndex === index && (Math.random() > 0.2)) {
        return getRandomIndex()
      }
      prevIndex = index
      return index
    }

    function getRandomImg() {
      return imgs.at(getRandomIndex());
    }

    return { cols, rows, getRandomImg };
  },
};
</script>

<style scoped>
.relative {
  position: relative;
}
.abs {
  position: absolute;
  top: 10%;
  left: 5%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(v-bind(cols), 1fr);
  grid-template-rows: repeat(v-bind(rows), 1fr);
  grid-gap: 10px;
}
.grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
}
</style>