What is the best practice for loading a global state variable on client-side?

[Nomango]

I have a very basic question, but so far I haven't found the answer anywhere. How can I asynchronously load a global state variable on the client side and avoid hydration errors?

I've tried using middleware, plugin setup, and even the plugin hook app:mounted, but none of them seem to be suitable.

Here's a sandbox I created for reference: sandbox link. If loaded correctly, you should see a red red turning into a black black. However, in reality, it appears as a red black.

Could you please help me with this? Thank you!

[xjccc]

use page:finish have a try?

[manniL]

In app.vue or in the layout @ onBeforeMount or onMounted. Example. The onNuxtReady hook would work too but comes in later ☺️

[MarioC3]

Would this be equivalent to fetching the data on a client-only plugin?

[manniL]

A client-only plugin would run before App.vue