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>