Autoplay not working with Nuxt

[isaacjoy]

I tried to implement autoplay with Vue-Awesome-Swiper and it doesn't start.

Steps to reproduce:

1. Install + add this as a plugin and register correctly in nuxt.config.js

"vue-awesome-swiper": "^4.1.1",
"swiper": "^6.0.4",

import Vue from 'vue'
import swiper from 'vue-awesome-swiper'
 
import 'swiper/swiper-bundle.css'
Vue.use(swiper)

2. Build the autoplay

<template>
    <div class="bg-yellow-400 w-screen h-screen flex justify-center items-center content-center">
        
        <phone>
            <swiper class="w-full h-full"  ref="mySwiper" :options="this.swiperOption">
                <swiper-slide>Slide 1</swiper-slide>
                <swiper-slide>Slide 2</swiper-slide>
                <swiper-slide>Slide 3</swiper-slide>
                <swiper-slide>Slide 4</swiper-slide>
                <swiper-slide>Slide 5</swiper-slide>

            </swiper>
        </phone>

      </div>

</template>
 
<script>

import phone from '~/components/goodPhone.vue'
  export default {
    layout: 'swiper',
    components: {
        phone,
    },
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
        effect: 'slide',
        loop: true,
        autoplay: {
          delay: 5000
        },
          spaceBetween: 30,
          centeredSlides: true,

        }
      }
    },
  }
</script> 

You should see something like this:

Where the slide just stays on the first one and doesn't move.

Anyone know why?

[lichunshan]

Hi, i use the same version as you， and encounter the same problem

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

i use Custom Build with Swiper solved this problemhttps://www.npmjs.com/package/vue-awesome-swiper#custom-build-with-swiper

import Vue from 'vue'
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
SwiperClass.use([Pagination, Mousewheel, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
import 'swiper/swiper-bundle.css'

Finally don't forget to import the style！！！