Framework7 Vue: Swiper slidesPerView not working

I banged my for 6 hours on this particular issue, and I’m posting this online so that when you Google it, you won’t have to go through the same.

On https://framework7.io/vue/swiper.html, the docs talk about an elegant Swiper component. It actually uses the Swiper library under the hood.

There are 3 examples and the on you and I are concerned with is the last one:

<f7-block-title>With additional parameters</f7-block-title>
  <f7-swiper navigation :speed="500" :slidesPerView="3" :spaceBetween="20">
    <f7-swiper-slide>Slide 1</f7-swiper-slide>
    <f7-swiper-slide>Slide 2</f7-swiper-slide>
    <f7-swiper-slide>Slide 3</f7-swiper-slide>
    <f7-swiper-slide>Slide 4</f7-swiper-slide>
    <f7-swiper-slide>Slide 5</f7-swiper-slide>
    <f7-swiper-slide>Slide 6</f7-swiper-slide>
  </f7-swiper>

Ah, slidePerView. Such a convenient param to have.

Except, it won’t work.

The solution?

Refer to a Framework7’s v1's documentation that tells you another way to pass the params. The page is https://v1.framework7.io/vue/swiper.html

The example code is

<f7-swiper next-button prev-button :params="{speed:500, slidesPerView: 3, spaceBetween: 20}">
  <f7-swiper-slide>Slide 1</f7-swiper-slide>
  <f7-swiper-slide>Slide 2</f7-swiper-slide>
  <f7-swiper-slide>Slide 3</f7-swiper-slide>
</f7-swiper>

And that’s the solution.

If I had the luxury of future me telling me the answer, I would have saved myself 6 hours. Instead, I had to inspect Framework7’s dist folders to look for the mention of ‘slidesPerView’ (there are no mentions of it being an accepted prop for the f7-swiper component). I tried to use the Swiper library for Vue directly but the project I was working on was fixed to Vue v2 and the Swiper Vue only supports Vue v3. I tried to use Swiper directly and inject the JS myself, bypassing Vue. Nope. I tried other libraries to no avail too. The solution was to look at an outdated Framework7 version’s documentation, despite my project using the latest version of Framework7.