[Vuejs]-How can i using swiper.js in vue js

Did you import swiper in your component?

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

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

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>