Hydration mismatch caused by computed not updating during SSR

[paro-paro]

Vue version

3.4.8

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-fnlumb?file=app.vue

Steps to reproduce

Sorry for adding a new hydration issue... But latest vue v3.4.8 does not seem to have fixed all hydration issues that appeared after the 3.4 upgrade.

The repro shows a hydration style mismatch using a simple application layout from vuetify.

Related vuetify issue here

Maintainer from vuetify is pointing to vuejs/core#5300 which is closed...

Thanks in advanced

What is expected?

No hydration warnings.

What is actually happening?

Hydration warnings are thrown.

System Info

No response

Any additional comments?

No response

[03251112]

我也遇到了哎，VUE3.4.8 nuxt3.9.1 ELEMENT PLUS2.4.4

[yyx990803]

@jianggangsheng this is a separate issue fixed in dcc68ef

[yyx990803]

For this specific warning in Vuetify, it is indeed related to #5300 because Vuetify uses computed to manage nested z-index for layouts, so this is no longer an issue with the hydration mismatch detection logic itself, but rather the detection is revealing real issues in other areas.

[paro-paro]

Thanks for the clarification!

[03251112]

@jianggangsheng这是dcc68ef中修复的一个单独问题

但好像没有完全解决这个问题，el-form组件写出来的错误是没有了，不过el-dialog和el-alert的警告还在

[yyx990803]

These are z-index issues probably with the same cause (#5300 computed z-index not updated during SSR)

[paro-paro]

Hi @yyx990803

Sorry to bother... but I just realized that this issue has being marked as low priority ("edge case that only affects a very specific use case") and I don't think that is the case since is heavily affecting nuxt + vuetify users (seems like element users as well).

You cannot make a simple "getting started" vuetify layout without bumping into this issue so I guess is affecting many applications at the moment.

So, are there any plans on addressing this issue short term? The related #5300 is marked as closed and limited to collaborators so any update will be really appreciated.

Thanks in advanced!

[rczdgbg]

no fix

[mkierdev]

@yyx990803 any updates on this? Style mismatch is triggered anytime client-side logic adds/removes classes to the element (for example hide something if user is logged in - due to various reasons check has to be made client-side)