How can i using swiper.js in vue js

Question

i was installing swiper.js with yarn add swiper

this is my code but it not show any slide or something

<swiper
   :slides-per-view="3"
   :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
 </swiper>

and the error say like this

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Swiper>
       <DetailProduct>
         <App> at src/App.vue
           <Root>

And this is my dependencies on package.json

"dependencies": {
    "bootstrap": "^4.5.3",
    "bootstrap-vue": "^2.18.1",
    "core-js": "^3.7.0",
    "node-sass": "^4.14.1",
    "numeral": "^2.0.6",
    "sass-loader": "^10.0.5",
    "swiper": "^6.3.5",
    "vue": "^2.6.11",
    "vue-router": "^3.4.9",
    "vue-toast-notification": "^0.5.4",
    "vuex": "^3.4.0"
  }

how can i using swiper.js in vue. hope you are can help me Thanks :)

Answer 1

This seem to work (in Nuxt v2.14) but I don't think it is the recommended way

Parent

<Swiper
  :options="carouselOptions"
 />

Child

<template>
  <div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">
    <div class="carousel-hero-wrapper swiper-wrapper">
      <div
        v-for="n in 5"
        :key="n"
        class="carousel-hero__slide slide swiper-slide"
      >
        <img
          src="https://via.placeholder.com/1680x720"
          class="slide__image"
          style="max-height: 100px;"
        />
        <div class="slide__content">
          <h4 class="slide__heading">Heading {{ n }}</h4>
          <p class="slide__description">Description {{ n }}</p>
          <a
            href="#"
            class="slide__button"
          >
          Learn more {{ n }}
          </a>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';

export default {
  name: 'Swiper',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          slidesPerView: 1
        }
      }
    }
  },
  data() {
    return {
      swiper: null,
    }
  },
  created() {
    console.log('Swiper', Swiper);
  },
  mounted() {
    let vm = this;

    if (this.options && vm.$refs.swiper !== 'undefined') {
    // or if (this.$el && this.options) {

      vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');

      this.swiper = new Swiper(vm.$refs.swiper, {
      // or this.swiper = new Swiper(this.$el, {

        slidesPerView: this.options.slidesPerView,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        on: {
          init: function () {
            console.log('swiper initialized');
          },
          resize: function () {
            console.log('resize');
          }
        }
      });
    }
  },
  methods: {

  }
};
</script>

<style scoped lang="scss">
  .carousel-hero {
    &--is-hidden {
      display: none;
    }

    &-container {
      @include make-container();
      @include default-max-widths();
      max-height: 200px !important;
      overflow: hidden;
    }

    &-row {
      @include make-row();
      padding: rem(25px 0);
      justify-content: center;
    }

    &-column {
      @include make-col-ready();
    }

    border: 10px solid red;

    &-wrapper {

    }

    &__slide {

    }

    .slide {
      &__image {
        @include img-fluid();
      }

      &__content {
        border: 1px solid blue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;

        @include media-breakpoint-up(lg) {
          max-width: 85%;
          max-height: 85%;
        }
      }

      &__heading {
        font-size: rem(48px);
      }

      &__description {

      }

      &__button {

      }
    }

  }
</style>

Answer 2

Vue module from Swiper website says "Swiper Vue.js components are compatible only with new Vue.js version 3". Reference

You package.json shows your Vue version is 2.6.11

Still, there are options to use Swiper. vue-awesome-swiper worked for me.

Answer 3

Did you import swiper in your component?

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

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    ...
}