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.