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

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 2

Did you import swiper in your component?

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

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

Answer 3

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>