How can I prevent CLS caused when mounting a Vue3 app?

Question

As I understand it, Vue3 moves the content of the mounted element into the virtual DOM. However, during this process the content of the mounted element disappears and then reappears when the app mounts. This is causing significant Cumulative Layout Shift.

I can apply a fixed height to the wrapping element to prevent the CLS but I'd prefer to keep an organic height.

Can the CLS caused by mounting a Vue3 app be prevented?

Answer 1

I can apply a fixed height to the wrapping element to prevent the CLS but I'd prefer to keep an organic height.

A min-height usually works well here to at the very least reduce the shift. And if the component covers the full screen, then usually possible to set a min-height to cover the full screen, thus eliminating the shift completely.