[Bug Report][3.6.4] id Hydration mismatch

[kingyue737]

Environment

Vuetify Version: 3.6.4 Vue Version: 3.4.25 Browsers: Edge 124.0.0.0 OS: Windows 10

Steps to reproduce

mount a vuetify component with id or similar attribute

Expected Behavior

no warning

Actual Behavior

[Vue warn]: Hydration attribute mismatch on input#input-2.v-field__input 
  - rendered on server: id="input-2"
  - expected on client: id="input-0"

[Vue warn]: Hydration attribute mismatch on div#input-2-messages.v-messages 
  - rendered on server: id="input-2-messages"
  - expected on client: id="input-0-messages"

[Vue warn]: Hydration attribute mismatch on label.v-label.v-field-label.v-field-label--floating 
  - rendered on server: for="input-2"
  - expected on client: for="input-0"

Reproduction Link

https://stackblitz.com/edit/github-fi3r47-ntgp2l

[frederikheld]

Same issue here, also with form inputs.

As I could not find any information on how to fix this, I temporarily worked around it by putting the whole v-form into a v-no-ssr directive. But it's not ideal.

[kingyue737]

@frederikheld my temporary workaround is filtering mismatch warning via warnHandler

for example

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.warnHandler = (msg, instance, info) => {
    if (
      msg.startsWith('Hydration attribute mismatch') &&
      (msg.includes('id="input') || msg.includes('for="input'))
    ) {
      return;
    }
    console.warn(msg, info);
  };
});

[kingyue737]

This can be fixed by useId introduced by vue v3.5 https://blog.vuejs.org/posts/vue-3-5#useid

[rudolfbyker]

This can be fixed by useId introduced by vue v3.5 https://blog.vuejs.org/posts/vue-3-5#useid

Thanks! This is useful in two ways:

• Vuetify developers can use this to fix the problem permanently.
• I can use it to work around the issue by overriding the IDs until it's fixed in Vuetify.