Swiper causes Vue hydration issue

[hemmoleg]

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?

[thomas4Bitcraft]

Are you using nuxt?

[hemmoleg]

Yes.

[andrscyv]

I wrapped swiper component inside the client-only nuxt component tag and it fixed it

<client-only> <swiper ref="mySwiper" > ... </swiper> </client-only>

[skylingfly]

I wrapped swiper component inside the client-only nuxt component tag and it fixed it

<client-only> <swiper ref="mySwiper" > ... </swiper> </client-only>

but if you did this wrap with code client-only, the html code will lose these seo related info. so Does anyone can fix this issue or can you give us any advice?