CODEWITHSUNDEEP
vue.jsvuejs3vuetify.jsvuetifyjs3
artistAhmed
artistAhmed

Reputation: 327

Vuetify 3 overlay does not work after migration from Vue 2

I am migrating a vue2 project to vue3 I have made a vite project and the code is of old vue2 but does work fine. I have a component that uses overlay functionality. I have tried many things but my overlay still does not work. My Overlay is set to true in data and absolute is also set to true. Can someone help, please?

<template>
 <v-card>
    <v-row>
       <v-overlay opacity="0.88" :absolute="absolute" :value="overlay">
        <v-btn color="warning" @click="disenable(false)">No Automation</v-btn>
      </v-overlay>
    </v-row>

    <v-toolbar flat dense color="indigo" style="margin-top: 10px;">
      <v-toolbar-title>
        Active Strategies
      </v-toolbar-title>
    </v-toolbar>
    <v-divider class="mx-4"></v-divider>
    <table fixed-header height="auto">
      <thead>
        <tr>
          <th class="text-left">Assetpair</th>
          <th class="text-left">Strategy</th>
          <th class="text-left">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in strategies" v-bind:key="row.ticker">
          <td>{{ row.assetpair }}</td>
          <td>{{ row.strategy }}</td>
          <td>
            <div class="text-left">
              <v-chip class="ma-2" color="red" dark @click="stopStrategy(127)">
                <v-icon left>mdi-server-plus</v-icon>Stop  Strategy
              </v-chip>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </v-card>
</template>
<script>

I am using Vite and Vue 3.2

Upvotes: 0

Views: 724

Answers (1)

yoduh
yoduh

Reputation: 14649

Vuetify 3 API is not guaranteed to always work the same as the older Vuetify 2 API. You need to consult the documentation to verify the props you're using still exist, or figure out what they've been changed to.

  1. value prop is now model-value
  2. opacity is no longer a prop but is a SASS variable $overlay-opacity
  3. absolute prop only accepts a boolean true or false

Your <v-overlay> should then look something like this:

<v-overlay :absolute="true" :model-value="overlay">

The opacity can be changed by following these instructions for overriding component specific SASS variables, and having a settings.scss file with the following:

@use 'vuetify/settings' with (
  $overlay-opacity: 0.88
);

Upvotes: 0

Related Questions