CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsswiper.js
Rju
Rju

Reputation: 63

Vue-awesome-swiper not working in nuxt universal app

Trying to make vue-awesome-swiper work in nuxt universal app.

My package versions:

I registered a plugin file (global registration directive): vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper /* { default options with global component } */)

Then my nuxt.config.js:

 plugins: [
    { src: '~/plugins/vue-awesome-swiper', mode: 'client' },

Then my component (global registration directive): componentSwiper

<template>
  <div v-swiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="2.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="3.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="4.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="5.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="6.jpg" alt="" />
      </div>
      <div slot="button-prev" class="swiper-button-prev"></div>
      <div slot="button-next" class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'componentSwiper',
  data() {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
          delay: 5000
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

And nothing moves, nothing happens. My slides are stuck, so I must be missing something?

Upvotes: 1

Views: 9307

Answers (4)

Seyed Abbas Seyedi
Seyed Abbas Seyedi

Reputation: 416

You can implement navigation through a ref on the awesome-swiper-vue:

  • "swiper": "^7.4.1",
  • "vue-awesome-swiper": "^4.1.1",

If you have the swiper component with a ref like so:

<section ref="mySwiperRef" v-swiper:mySwiper="swiperOption">
  ...
  <section slot="button-next" class="swiper-button-next" @click="nextSlideItem"></section>
</section>

you can access the slide event like so from a method:

export default {
  ...
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 20,
        freeMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
        },
      },
    };
  },
  methods: {
    nextSlideItem() {
      this.$refs.mySwiperRef.swiper.slideNext();
    },
  },
}

or

this.$refs.mySwiperRef.swiper.slidePrev()

Upvotes: 0

Imhlux
Imhlux

Reputation: 1

Use local registration and swiper: "5.4.5"

import { directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  directives: {
    swiper: directive
  }
}

and the use of slots in the navigation buttons does not matter if you use the directive

Upvotes: 0

tokto
tokto

Reputation: 156

Try downgrading the version of your swiper package to a previous one.

  1. In your package.json file look for the package and modify the version:
...

  "swiper": "5.4.5",
  "vue-awesome-swiper": "4.1.1",

...
  1. Stop Nuxt from running and run npm install

Check this issue on Github for more information: https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-655928225

Upvotes: 2

soroush
soroush

Reputation: 756

Please try this in nuxt.config.js

plugins: [
 { src: '~/plugins/vue-awesome-swiper', ssr: false }

Upvotes: 0

Related Questions