0%

在Nuxt中使用Vue Awesome Swiper

Posted on Edited on In

今天試著把本來在spa專案中的vue awesome swiper放到nuxt上用，當初沒按照官方的路徑寫，因為我覺得我自己寫的也沒錯哈哈哈，走了很多彎路才成功，這邊來記錄一下

安裝

1
npm install vue-awesome-swiper --save

加入pluging

在專案中的plugings資料夾建立一個vue-awesome-swiper.js的文件，並在裡面填入以下程式碼

1
2
3
4
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper' ;

Vue.use(VueAwesomeSwiper) ;

添加設定到nuxt.config.js中

這邊引入了swiper的css與plugins，我在pluging這邊的src設定卡關很久，我自己設定的路徑是/plugings/vue-awesome-swiper.js，乍看之下這個方式應該沒錯才對，但編譯後都會顯示找不到這個plugings，參考官方給的設定才成功

然後ssr為false，因為很多pluging都只有支援client而已，這樣設定會比較保險

1
2
3
4
5
6
7
module.exports = {
  css: [
    'swiper/dist/css/swiper.css',
  ],
  plugins: [
    { src: '~/plugins/vue-awesome-swiper', ssr: false },
  ]

使用方法

直接參考官方給的範例，可以看到跟在SPA中的使用方式有非常大的不同，主要是因為SPA使用的是component，SSR則是使用了directive（指令）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
  <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // some swiper options...
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.banners.push('/4.jpg')
        console.log('banners update')
      }, 3000)
      console.log(
        'This is current swiper instance object', this.mySwiper, 
        'It will slideTo banners 3')
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

vue-awesome-swiper/nuxt-ssr-example
Nuxt.jsでvue-awesome-swiperを使ったスライダー実裝
nuxt.js使用swiper