nuxt3 使用vue-awesome-swiper

安装

npm install vue-awesome-swiper --save  4.1.1版本
npm install swiper --save  5.x版本

目录plugins下创建vue-swiper.ts文件

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

Vue.use(VueAwesomeSwiper)

nuxt.config.ts文件的plugins添加

  { src: '@/plugins/vue-swiper', ssr: false }

使用

<div
  v-if="swiperList.length > 0"
  ref="swiperref"
  v-swiper:mySwiper="swiperOption"
  class="swiper-container"
>
</div>

  setup() {
    const data = reactive({
        swiperOption: {
            observer: true,
            observerParents: true,  
            slidesPerView: 'auto', // 必须使用这个 否则适配会有问题的
            spaceBetween: process.client
              ? (34 / 37.5) * parseFloat(document.documentElement.style.fontSize)
              : 35, // 间隔  因为使用rem  所以要进行转换
            pagination: {
              el: '.swiper-pagination',
            },
            on: {
              // 轮播
              slideChange() {
                data.slideChange(this.activeIndex)
              },
              // 索引
              activeIndex: 0,
            },
        },
    })
}

注意：必须在onmounted添加如下代码监听滑动事件

onMounted(() => {
  nextTick(() => {  
    if (swiperref.value?.swiper) {
      swiperref.value.swiper.on('activeIndexChange', () => {
        data.slideChange(swiperref.value.swiper.activeIndex)
      })
    }
  })
})