[nuxt] "Hydration text content mismatch" in client side with nuxt 3

[DonSalvador]

Describe the bug

When using the plugin on the client side with Nuxt 3, a mismatch in hydration appears.

Reproduction

https://stackblitz.com/edit/nuxt-starter-9mvexw?file=composables/authStore.ts

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible of the bug.

[prazdevs]

Ok i got time to try it and it is indeed weird, does it cause any problem besides the warning ?

[DonSalvador]

No warning. I ended up using <client-only> which I think is appropriate since the data will only be available on the client.

[toniengelhardt]

@DonSalvador try registering the plugin like this instead:

export default defineNuxtPlugin((nuxtApp: any) => {
  nuxtApp.$pinia.use(piniaPluginPersistedstate)
})

aka. on nuxtApp.$pinia instead of on $pinia, that resolved it for me...

[prazdevs]

v3 is now release with available nuxt module as well! docs are also deployed 🚀 closing this for now, if still having issues, feel free to reopen