Vuetify - Dashboard Card example

README.md

DashboardCard.vue

<script setup lang="ts">
const props = defineProps<{
  value: string
  list?: Record<string, any>[]
  listOptions?: Record<string, any>
}>()
</script>

<template lang="pug">
v-card(v-bind="$attrs")
  template(#append v-if="value")
    .text-h3.text-primary.ml-8 {{ value }}
  v-list(v-if="list?.length" v-bind="listOptions")
    template(v-for="item in list")
      app-list-item(v-bind="item")
  slot
</template>

index.vue

<script setup lang="ts">
import DashboardCard from './DashboardCard.vue'

const items = [
  {
    title: 'Card 1',
    subtitle: 'Ele é bonito',
    value: '10',
    prependIcon: 'md:person',
    text: 'Sexyness level',
    image: '',
    list: [
      { title: 'Beta level', appendTitle: '0%' },
      { title: 'Alpha level', appendTitle: '90%' },
      { title: 'Chad level', appendTitle: '100%' },
    ]
  },
  {
    title: 'Card 2',
    subtitle: 'Esse é feio',
    value: '20',
    prependIcon: 'md:person',
    text: 'Uglyness level',
  },
]
</script>

<template lang="pug">
.d-flex.align-center.justify-center.fill-height.bg-grey.flex-gap-8
  template(v-for="(item, i) in items")
    DashboardCard(v-bind="item")
      template(v-if="i === 0")
        //- Exemplo de uso com slot
        v-img(src="https://dudeproducts.com/cdn/shop/articles/gigachad_1068x.jpg?v=1667928905")
</template>