Hydration errors style attribute since vue 3.4 about core

[nestle49]

upd. isMounted inside a component solves the problem, but should we add a check everywhere? It's almost as if :style itself is defective

:style="{ paddingRight: isMounted ? ${widthCartButton + 10}px : 0 }"

upd2. Is there some kind of lifecycle hook that would indicate the end of hydration of the entire application?

[yyx990803]

We don't know what useElementSize is doing underneath, please provide a runnable reproduction instead of code snippets.

[DaniilIsupov]

We don't know what useElementSize is doing underneath, please provide a runnable reproduction instead of code snippets.

I made minimal reproduction: https://github.com/DaniilIsupov/reproduction-hydration
In my example at App.vue I can't wait when all child components are mounted
Because of this prop.count value is being updated until hydration is complete

[nestle49]

We don't know what useElementSize is doing underneath, please provide a runnable reproduction instead of code snippets.

I made minimal reproduction: https://github.com/DaniilIsupov/reproduction-hydration In my example at App.vue I can't wait when all child components are mounted Because of this prop.count value is being updated until hydration is complete

Yes, this is the crux of the problem

useElementSize is a VueUse helper, but that's not important

The fact is that in large difficulty applications, some components are mounted before others, which leads to hydration errors when changing some parameters depending on the client side. In my case, VueUse useElementSize passes the width from the client and causes the style attribute of the not yet mounted component to change and throws an error

However, this is very difficult to reproduce in a minimal example, since the components are mounted almost simultaneously

Therefore, when accessing a client entity in one place, we cannot be sure that all components in which changes will occur have already been mounted and hydration has been completed