Vuetify dialog adds new dialog to dom each time it is opened and exon't remove the previous on close

Question

We have a large scale application but in Vue 2, Composition API and Nuxt.

However we load a lot of content in dialogs. After using the application for several minutes you can see a build up of these dialogs in the DOM.

Is there a way for Vuetify to use the existing dialog one instead of creating a new instance. Or remove the existing one on close?

I can't see anything in the docs or similar issues from other users.

Answer 1

Each v-dialog with a v-model will be added to the DOM first time it's active/opened, then the visibility is changed on subsequent toggles. It's more "expensive" to add and remove DOM elements (size depending on its nested content) than toggle an active class and add a simple overlay. Probably why it's not recommended to nest v-dialog within a v-for loop, the DOM will get too crowded. If the dialog content is interchangeable, you could have one dialog on the page where the content is toggled too.