Nuxtjs 集成 swiper vue-awesome-swiper 插件

1、必须指定版本 不然各种坑 经测试通过如下

yarn add [email protected]

yarn add [email protected]

2.项目中创建插件目录及文件

~/plugins/vue-awesome-swiper.js

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

Vue.use(VueAwesomeSwiper)

3.设置nuxtConfig

~/nuxt.config.js

export default {
    plugins: ['~/plugins/vue-awesome-swiper'],
}

4.在自己的组件中使用

~/pages/test.vue

<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'TestPage',
  components: {
  },
  layout: 'costomLayout',
  data () {
    return {
      swiperOptions: {
        slidesPerview: 2,
        direction: 'vertical'
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>