Vue-awesome-swiper: 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)



md5-183d79e06f33051d8ed4514f355e9efa



<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>



md5-42f927d87c0b1ee3ada3de297aab408b

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！！！