Hydration Password

[kmuip]

Hello there :)

Today I had the following issue with Primevue:

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting

Current behavior
The dev tool console reports a hydration warning on page load if a Password component is present.

Expected behavior
No hydration warning.

Minimal reproduction of the problem with instructions
Here is a minimal reproduction of the issue:
https://github.com/kmuip/primevue-bug-reprod

I installed nuxt3 as per https://v3.nuxtjs.org installation guide and added primevue according to the quick start example. (https://github.com/primefaces/primevue-quickstart-nuxt3)

What is the motivation / use case for changing the behavior?

For me, router.push('/route') does not work while such a hydration warning exists.

Please tell us about your environment:
Windows 10 with Ubuntu WSL, vscode, node 16 LTS, yarn

• Vue version:
  Latest nuxt3 package

• PrimeVue version: 3.10.0
  I did not test it with previous versions.

• Browser: Chrome 94, latest build

[kmuip]

I found the issue with the Password component.

It is the "Teleport" component provided by Vue3 which is causing the problem in Nuxt3 ssr mode.
It only affects the password strength panel.

nuxt/nuxt#12766

I'm not sure yet if this is a problem that is going to be fixed or if Teleport should not be used in ssr mode.

Workaround
Wrap the Password component in <ClientOnly> for now.

[mertsincan]

Fixed in #2602