how is it preventing hydration?

[oppianmatt]

I think I'm missing something here. I wrapped a component with lazy hydration when-visible

But the child component mounted still fires even before it's visible.

What hydration is it actually preventing? I thought mounted runs during hydration. So what is this lazy hydration wrapper doing if the children still hydrate?

[dsvgl]

IMO this lib stoped working when Vue 3.5 came out with "native" lazy hydration: https://blog.vuejs.org/posts/vue-3-5#lazy-hydration We encountered the same (using Nuxt) and found no way to make it work again. It worked fine before Vue 3.5. We are now using the mentioned lazy hydration from Vue itself. It works but I don't like the verboseness. Hopefully Nuxt comes up with some syntactic sugar :)

Hint: I wouldn't recommend to use the hydrateOnIdle strategy if you are targeting mobile and/or desktop Safari. It uses requestIdleCallback under the hood which is not supported by Safari. Our whole app crashed on Safari because of this. At least Vue recently added a very simple setTimeout fallback in this case. But this is more a "don't crash the app" fallback then doing something similar to requestIdleCallback :/