I am reopening it because there still seems to be a problem.

Examples:

Hydration attribute mismatch on <input... https://stackblitz.com/edit/nuxt-starter-14rqc1

Also migueabellan is having same issues with VNavigationDrawer and VAppBar.

Hydration attribute mismatch on <header... Here is his code: https://stackblitz.com/edit/nuxt-starter-wtdujy

Issues from other libs: https://github.com/nuxt/image/issues/1189 https://github.com/nuxt/image/issues/1190

Thanks for your help!

It looks like changes are being made, let's see if it solves these problems as well.

https://github.com/vuejs/core/commit/972facee0d892a1b6d9d4ad1da5da9306ed45c3f

Looks like a duplicate of #10057

I can't seem to reproduce the class related warnings, can only see mismatch for readonly which is fixed in https://github.com/vuejs/core/commit/972facee0d892a1b6d9d4ad1da5da9306ed45c3f

If the readonly issues are the only ones left then I'm closing this. Please let me know if the class mismatch issue persists.

I tried the new release and my console is full of hydration warns. I think it still needs some work to fix it.

In my particular case I am using Vuetify and I am getting now "Hydration attribute mismatch" on many components.

[Vue warn]: Hydration attribute mismatch on <li class=​"v-breadcrumbs-item" style>​
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"

 [Vue warn]: Hydration attribute mismatch on <label class=​"v-label v-field-label" style for=​"input-13">​
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

For this one I have many warns up to input-27

[Vue warn]: Hydration attribute mismatch on <img class=​"v-img__img v-img__img--cover" style src=​"<privacy-removed>">​
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""

In total I have 14 warn messages in that page.

I am trying to reproduce the same in the following page, but it is working fine there. This is so weird. https://stackblitz.com/edit/nuxt-starter-14rqc1

And then, here is the example from @migueabellan bumped to the latest version that still fails with the following warn: [Vue warn]: Hydration style mismatch on https://stackblitz.com/edit/nuxt-starter-lunnwj

Hope this can help, sorry for tagging @yyx990803 As the issue is closed, I don't know any other way to keep this conversation.

While writing I see other issue being created: https://github.com/vuejs/core/issues/10069

I too agree with the above, some more work is still required to resolve this. I've just tested the new release and although it has resolved some of the issues, such as the one with the readonly attribute. This is still occurring on others, such as the list attribute:

[Vue warn]: Hydration attribute mismatch on <input name=​"test" value>​</input>​
  - rendered on server: list="null"
  - expected on client: list=""

Simplified code to reproduce:

<template>
  <input
    name="test"
    :list="dataList.options.lengh > 0 ? dataList.name : undefined"
    value=""
  >
  <datalist :id="dataList.name " v-if="dataList.options.length > 0">
    <option v-for="o of dataList.options||[]" :key="o" :value="o" />
  </datalist>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'testInputComponent',

  setup() {
    return {
      dataList: {
        name: 'test',
        options: []
      }
    }
  }
})
</script>

I too agree with the above, some more work is still required to resolve this. I've just tested the new release and although it has resolved some of the issues, such as the one with the readonly attribute. This is still occurring on others, such as the list attribute:

[Vue warn]: Hydration attribute mismatch on <input name=​"test" value>​</input>​
  - rendered on server: list="null"
  - expected on client: list=""

Simplified code to reproduce:

<template>
  <input
    name="test"
    :list="dataList.options.lengh > 0 ? dataList.name : undefined"
    value=""
  >
  <datalist :id="dataList.name " v-if="dataList.options.length > 0">
    <option v-for="o of dataList.options||[]" :key="o" :value="o" />
  </datalist>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'testInputComponent',

  setup() {
    return {
      dataList: {
        name: 'test',
        options: []
      }
    }
  }
})
</script>

Resolved with the latest release https://github.com/vuejs/core/blob/main/CHANGELOG.md#349-2024-01-11 🎉

With Nuxt Image I'm getting a lot of hydration errors on the latest Vue (3.4.9)

  - rendered on server: referrerpolicy="undefined"
  - expected on client: referrerpolicy=""
  
  - rendered on server: usemap="undefined"
  - expected on client: usemap=""
  
  - rendered on server: crossorigin="undefined"
  - expected on client: crossorigin=""
  
  - rendered on server: loading="auto"
  - expected on client: loading=""
  
  - rendered on server: decoding="auto"
  - expected on client: decoding=""

Still having the same errors

Here is an example: https://stackblitz.com/edit/nuxt-starter-14rqc1

@Josepdal 3907c87ce

I tried the new release and my console is full of hydration warns. I think it still needs some work to fix it.

In my particular case I am using Vuetify and I am getting now "Hydration attribute mismatch" on many components.

[Vue warn]: Hydration attribute mismatch on <li class=​"v-breadcrumbs-item" style>​
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"

 [Vue warn]: Hydration attribute mismatch on <label class=​"v-label v-field-label" style for=​"input-13">​
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

For this one I have many warns up to input-27

[Vue warn]: Hydration attribute mismatch on <img class=​"v-img__img v-img__img--cover" style src=​"<privacy-removed>">​
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""

In total I have 14 warn messages in that page.

I am trying to reproduce the same in the following page, but it is working fine there. This is so weird. https://stackblitz.com/edit/nuxt-starter-14rqc1

And then, here is the example from @migueabellan bumped to the latest version that still fails with the following warn: [Vue warn]: Hydration style mismatch on https://stackblitz.com/edit/nuxt-starter-lunnwj

Hope this can help, sorry for tagging @yyx990803 As the issue is closed, I don't know any other way to keep this conversation.

While writing I see other issue being created: #10069

Okay, of all these alerts, the first one has disappeared, but both the for="" and the draggable="" still appear.

Same with this example: https://stackblitz.com/edit/nuxt-starter-lunnwj

It might be related to what you were saying about the way Vuetify uses the computed values? https://github.com/vuejs/core/issues/10069

I would have to report it directly to Vuetify then or will you keep working to fix it from Vue? It's not clear to me, as the above issue is still open.

Thanks @yyx990803

With Nuxt Image I'm getting a lot of hydration errors on the latest Vue (3.4.9)

  - rendered on server: referrerpolicy="undefined"
  - expected on client: referrerpolicy=""
  
  - rendered on server: usemap="undefined"
  - expected on client: usemap=""
  
  - rendered on server: crossorigin="undefined"
  - expected on client: crossorigin=""
  
  - rendered on server: loading="auto"
  - expected on client: loading=""
  
  - rendered on server: decoding="auto"
  - expected on client: decoding=""

With the latest version this isn't fixed however the amount of mismatches have changed. Now I'm getting:

- rendered on server: loading="auto"
- expected on client: loading=""

 - rendered on server: decoding="auto"
- expected on client: decoding=""

Should be fixed now by 08b60f5d0 and released in 3.4.11

Should be fixed now by 08b60f5 and released in 3.4.11

We are getting close.

ERRORS IN THE PAST:

[Vue warn]: Hydration attribute mismatch on <li class=​"v-breadcrumbs-item" style>​
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"

 [Vue warn]: Hydration attribute mismatch on <label class=​"v-label v-field-label" style for=​"input-13">​
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

For this one I have many warns up to input-27

[Vue warn]: Hydration attribute mismatch on <img class=​"v-img__img v-img__img--cover" style src=​"<privacy-removed>">​
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""

Icon and draggable ones have been fixed.

CURRENT ERRORS:

 [Vue warn]: Hydration attribute mismatch on <label class=​"v-label v-field-label" style for=​"input-13">​
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

Also, the z-index Vuetify warn still showing up, don't know who's fault is: Repro: https://stackblitz.com/edit/nuxt-starter-lunnwj

NEW ERRORS:

[Vue warn]: Unhandled error during execution of app errorHandler
Uncaught (in promise) Maximum recursive updates exceeded in component <VSliderThumb>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Thanks.

UPDATE

New errors have been fixed in v3.4.13 ✅

CURRENT ERRORS:

 [Vue warn]: Hydration attribute mismatch on <label class=​"v-label v-field-label" style for=​"input-13">​
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

Also, the z-index Vuetify warn reproduction: Repro: https://stackblitz.com/edit/nuxt-starter-lunnwj

Probably both of them related. I still don't know if it's a problem with Vue or Vuetify.

In the latest update I'm getting hydration errors on how whitespace is handled

- rendered on server: "\n\t\t\tAll\n\t\t"
- expected on client: "\r\n\t\t\tAll\r\n\t\t" 

My vue settings for whitespace are as follows:

vue: {
    compilerOptions: {
        whitespace: 'preserve'
    }
}

nuxt-aos lib same ploblem....