[Feature Request] clean up bootable content on close

[DRoet]

Problem to solve

See: #4518, this might make more sense now that lazy is the new default in 2.0.

I know a workaround is to use a v-if on the content, but this can cause issues with transitions

Proposed solution

Make sure content inside a v-dialog etc. rerenders by default, a prop like keep-alive could be introduced to get the current behaviour

[MatthewAry]

All of the applications that I have been building are very data driven and produce A LOT of DOM nodes. One of the ways that I can reduce the DOM node overhead (aside from using a some special observer events to deterministically unload nodes) is to put UI into dialog boxes. In order to keep my UI lean on DOM Node usage, I need to be able to clean up the contents of a dialog after it closes. This feature can be very valuable to keep the browser performant. Also:

Use case for this feature
A dialog is used to add users to the recipients of an email. When users are selected and added to the recipient list, the users that have already been added should not show up when the dialog box is opened again.

The dialog contents gets the user list data upon creation. We could perform a getUsers request to the server after we click the apply button but that could amount to unnecessary requests to the server. Instead the preferred solution is to get a new list of users every time the dialog is opened. The easiest way to do this is to destroy component being rendered in the dialog box after the dialog is closed and create the dialog contents fresh every time its opened. This ensures that the data stays fresh.

[MatthewAry]

Currently for almost every single dialog I have to have two state variables. One to track if the dialog is visible showDialog, and the other to render the dialog's contents renderDialog. I have a watcher on the showDialog variable which will set the renderDialog variable to true whenever showDialog is true. When showDialog changes to false, then I set renderDialog to false after a 300ms delay.

I end up doing this almost every single time. It's getting very tedious.

[MatthewAry]

Would like to see this added to V3

[marcnewton]

I too have found over 90% of my usage case of dialog I need it to destroy inner content.

Made my own dialog in Vue 3 that does this without ruining the close animation, so easy to achieve vs Vue 2.
Vuetify 3 will benefit greatly, looking forward to V3 and I hope my projects put me in a position to sponsor Vuetify.