Vuetify 3 wrap component

76 Views Asked by At

I'd like to wrap a simple v-img setting the placeholder slot but I want to keep the functionality to pass other defined slots in the v-img.

Plus, I'd like to keep the typescript hinting from outside the wrapper component: every props accepted by the v-img I expect to be passed to the wrapper so I don't need to redefine every prop exposed by the v-img.

<template>
  <v-img>
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="name" v-bind="scope" />
    </template>
    <template #placeholder>
      <div class="d-flex align-center justify-center fill-height">
        <v-progress-circular color="primary" indeterminate />
      </div>
    </template>
  </v-img>
</template>

The #[slot] part is wrong in typescript because slot is a string | number.

Thanks in advance.

0

There are 0 best solutions below