Content placeholder component in #vue3

ContentPlaceholder.vue

<template>
  <div class="content-placeholder gap-1 animate-pulse">
    <div v-for="template of templates" :key="template" class="bg-gray-300" :style="{gridArea: template}" />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  template: Array<Array<string>>
  rows: string
  columns: string
}>()

const cssGridTemplate = computed(() => props.template.map(template => `"${template.join(' ')}"`).join('\n'))
const templates = computed(() => Array.from(new Set(props.template.flat())))
const rows = computed(() => props.rows)
const columns = computed(() => props.columns)
</script>

<style scoped>
.content-placeholder {
  display: grid;
  grid-template-areas: v-bind(cssGridTemplate);
  grid-template-columns: v-bind(columns);
  grid-template-rows: v-bind(rows);
}
</style>