Swiper breaks when using Nuxt3 and routing between pages

[Der-Alex]

Hi. I want to use Swiper with Nuxt3. Therefore I created a basic nuxt3 project, created two pages and included swiper/vue inside one page just like your documentation says. Everything works fine until I route to another page. When routing back I get the following error:

Uncaught (in promise) TypeError: can't access property "each", swiper.visibleSlides is undefined

To reproduce it, here is my project: https://github.com/Der-Alex/nuxt3swipertest
I could break it down to a combination of swipers properties :slides-per-view="3" :centered-slides="true" and nuxt3. With a vue3 project and vue-router everything works fine...

Maybe I am using swiper wrong inside nuxt3 and have to use it as a plugin? If I have to use swiper as a plugin, could you please give me a sample?

If not: Any idea what causes the break?

Regards

[Der-Alex]

I tried to dig into that a bit further. On the swiper side there is this code Snippet:

swiper/src/core/update/updateAutoHeight.js

Lines 22 to 27 in b3697f1

	if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
	if (swiper.params.centeredSlides) {
	swiper.visibleSlides.each((slide) => {
	activeSlides.push(slide);
	});
	} else {

The property swiper.visibleSlides only gets created here:

swiper/src/core/update/updateSlidesProgress.js

Line 19 in 244cc2e

swiper.visibleSlides = [];

After routing back and forth in nuxt3 ( nuxtLink to /foo and back to / ) the property visibleSlides is gone...

Currenty I don't know, what the nuxt3 routing does. Maybe we have some race condition here?

I would really like to use the swiper with nuxt3 but I also need that specific swiper configuration that currently breaks... :/

[Der-Alex]

Okay I forked the swiper repo and fiddled around a bit. Here's how I could make it work:

I changed the updateAutoHeight.js as followed:

    if (swiper.params.centeredSlides) {
      if (!swiper.visibleSlides) {
        swiper.visibleSlides = [];
      }

      for (const slide of swiper.visibleSlides) {
        activeSlides.push(slide);
      }
...

So first I created the property visibleSlides if it doesn't exist. Then I changed the dom7 function each to a simple for loop.
After these changes, everything seems to work fine with nuxt3.

@nolimits4web Could you please check this too? If it's a bug, I would create a bug ticket and could make my snippet to a PR.

[nolimits4web]

fixed here 3909c45