Questions & Answers

How to use swiper breakpoints in Vue Js

Good morning, I'm making a site using VueJS for the frontend, I have installed SwiperJS via npm for Vue to make sliders. It works fine but i'm not able to make functioning breakpoints to have a responsive number of slides. I used this code to make a responsive post section that has all 4 posts showed in the PC view and only one at a time on the mobile view (and you can also scroll to the posts on mobile view )

This is my code:



    <swiper-slide v-for="posts in APIData" :key="posts.slug">
      <img class="card-img-top" v-bind:src=posts.image alt="Card image cap">
      <hgroup class="text">
        <router-link to="/single"> <h3>{{posts.title}}</h3> </router-link>
        <p>{{posts.desc.substring(0,80)+".." }}</p>

  // Import Swiper Vue.js components
  import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/swiper.scss';
  import 'swiper/components/pagination/pagination.scss';
  import 'swiper/components/navigation/navigation.scss';
  import { getAPI } from '../../api'
  // Swiper Plugins
  SwiperCore.use([Navigation, Pagination, Autoplay]);

  export default {
    data () {
      return { // Retourn the API Dates
        APIData: [],
        swiperOptions: {
          breakpoints: {       
      320: {       
         slidesPerView: 1,
         spaceBetween: 10     
      770: {       
         slidesPerView: 2,       
         spaceBetween: 50     
      771: {       
         slidesPerView: 4,       
         spaceBetween: 30     

    components: {
    methods: {
      onSwiper(swiper) {
      onSlideChange() {
        console.log('slide change');
  // Connect to API
   created () {
        .then(response => {
          console.log('Post API has recieved data')
          this.APIData =
        .catch(err => {

<style lang="sass" scoped>

    background: linear-gradient(to top left, #BF092D, #8D0923)
    height: 80vh
    padding: 3rem
        padding: 20px
        color: #fff
        float: right
            background-color: #fff
            border-radius: 5px
                padding: 1rem
                    background: linear-gradient(to top left, #BF092D, #8D0923)
                    -webkit-background-clip: text
                    -webkit-text-fill-color: transparent
                margin: auto
                display: block
                width: 100%
                height: 45% 
                border-radius: 5px 5px 0px 0px

Answers(3) :

Solution from mark is working but with using flexbox when manually resizing window (or after flipping mobile phone) it doesn't update. Just on first load, some bug of vue-swiper?

I'm using:


But I also added if somebody need:

 <script setup>   
   ...swiper loadings...
    const swiperUpdate = () => {
    onMounted(() => {
        window.addEventListener('resize', swiperUpdate);
    onBeforeUnmount(() => {
        window.removeEventListener('resize', swiperUpdate);

You need to pass the options object to the Swiper like this:


Also for other properties: Vue component takes properties one at a time. This can also be checked using devtools: enter image description here

Just add this inside of "Swiper" element :breakpoints="{ 600:{ slidesPerView:3 }, 900:{ slidesPerView:4, } }"