search

egidiusmengelberg / nuxt-aos

A Nuxt module that adds Animate On Scroll
https://www.npmjs.com/package/nuxt-aos
MIT License
65 stars 5 forks source link

Hydration class mismatch using Layouts (SSR) v1.2.3 #21

Closed ahmedrangel closed 6 months ago

ahmedrangel commented 7 months ago

The hydration class mismatch fix in #19 works but for some reason the issue persists when using Layouts (SSR mode).

image

See this for reproduction: https://stackblitz.com/edit/nuxt-starter-x47xa7

nuxt (3.10.2) nuxt-aos (1.2.3)

egidiusmengelberg commented 6 months ago

Mmm, maybe layouts are rendered at a different time. I'll investigate.

ahmedrangel commented 6 months ago

Mmm, maybe layouts are rendered at a different time. I'll investigate.

I tried using the original aos package, just like you use it in your module, but through the plugins folder to test some of the Nuxt App Hooks.

I also got the hydration class mismatch issue using app:mounted, but I got it working after testing with hooks that comes after app:mounted such as app:suspense:resolve and page:finish.

Maybe one of those could be the solution?

You can check it here: https://stackblitz.com/edit/nuxt-starter-qt3scw?file=plugins%2Faos.js

egidiusmengelberg commented 6 months ago

Ah okay, Ill create a PR right now. I think page:finish would be a good solution.

egidiusmengelberg commented 6 months ago

page:finish did not work in my tests, It removed all the elements from the page.

app:suspense:resolve did work, and is released in 1.2.4 so it should be fine now.

If it's still broken, please create a new issue.