This repository has been archived by the owner on Jul 15, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Swiper causes Vue hydration issue #809
Comments
Are you using nuxt? |
Yes. |
I wrapped swiper component inside the client-only nuxt component tag and it fixed it
|
but if you did this wrap with |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Simply adding the swiper to a page like this:
<swiper ref="mySwiper" :options="swiperOptions"></swiper>
causes the virtual DOM tree not matching server side rendered content.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
The generated HTML in the browser then looks like this:
<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events"><div class="swiper-wrapper" style="transition-duration: 0ms;"></div></div>
What exactly is causing the error and how can it be solved?
The text was updated successfully, but these errors were encountered: