0

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?

Kyl
  • 125
  • 1
  • 7
  • It's unclear what's your case. Where does "the content of the mounted element" come from? – Estus Flask Nov 10 '22 at 11:09
  • 1
    Use statically generated markup with tools like Nuxt. Take care of giving dimensions to your images ahead of time and don't do sneaky client-side conditionals regarding the style. Should fix most of the issues. – kissu Nov 10 '22 at 11:12

1 Answers1

0

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.

Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
  • A CLS is not even related to a fixed height or not, but the difference between one value and another (or server/client). – kissu Nov 11 '22 at 11:24
  • An empty div, which is replaced with an app will create CLS for the content below if not given a height or min height. – Barry Pollard Nov 11 '22 at 16:01