Destroy/Init swiper slide on vue based on screen width, which is correct?

Question

Vue.js

You need to enable the slider only on mobile resolutions below 768px.

<template>
      <swiper ref="mySwiper" :options="swiperOption">
        <swiper-slide>
          <div class="slideItem"></div>
        </swiper-slide>
      </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {

  name: 'SwiperCarousel',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      swiperOption: {
        // direction: 'vertical',
      }
    }
  },
}
</script>

Answer 1

Something like this is possible:

<template>
      <swiper v-if="isShown" ref="mySwiper" :options="swiperOption">
        <swiper-slide>
          <div class="slideItem"></div>
        </swiper-slide>
      </swiper>
</template>

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {

  name: 'SwiperCarousel',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      isShown: false,
      swiperOption: {
        // direction: 'vertical',
      }
    }
  },
  mounted() {
    const media = window.matchMedia('(max-width:768px)');
    const listener = e => this.isShown = e.matches;
    listener(media);
    media.addListener(listener);
    this.$once('hook:beforeDestroy', () => media.removeListener(listener));
  }
}

https://developer.mozilla.org/ru/docs/Web/API/Wind...