melvswrld
melvswrld

Reputation: 1

v-hover (Vuetify 2) not working in production

I’m using vue 2 and vuetify 2 but I have a little problem using a v-hover component from vuetify, everything is working great except that v-hover that only works local and when I try it in production (vercel) doesnt work

<v-hover
      v-slot="{ hover }"
      v-for="card in cards"
      :key="card.id"
      class="work-cards"
      :style="$vuetify.breakpoint.xs ? 'place-items: center;' : ''"
    >
      <v-card
        data-aos="fade-up"
        class="d-flex content-card elevation-0 mb-2"
        @click="openWork(card)"
      >
        <div
          :class="['img-container rounded-lg', { 'zoom-img': hover }]"
          :style="{
            backgroundImage: `url(${card.img})`,
          }"
        >
          <div
            :class="['container-info', { 'opacity-info': !hover }]"
            style="min-height: 250px"
          >
            <div class="d-flex mb-1">
              <p
                class="card-year font-weight-black grey--text text--lighten-3 mb-0 mx-2"
              >
                {{ card.year }}
              </p>
              <p class="card-title font-weight-black white--text mb-0">
                {{ card.shortTitle }}
              </p>
            </div>

            <div class="d-flex">
              <v-chip
                small
                v-for="chip in card.tech"
                :key="chip.id"
                :text-color="chip.color"
                class="ml-2"
                :color="chip.background"
                >{{ chip.name }}</v-chip
              >
            </div>
          </div>
        </div>
      </v-card>
    </v-hover>

Here you can try Portfolio

Upvotes: 0

Views: 27

Answers (0)

Related Questions