[Vuejs]-Vuetify 3 overlay does not work after migration from Vue 2

by

0👍

✅

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
);

Leave a comment