Nuxt.jsでvue-awesome-swiperを使ったスライダー実装

NuxtでVueのプラグイン入れるの結構ムズくないか？と思ったので書きました。

環境

• Windows10
• yarn -v 1.13.0
• node -v 8.11.1
• vue --version 2.9.6

vue-awesome-swiperを使う

Nuxt.jsのウェルカムページが見られるベースの環境はできているものとします。
そこがまだな方は、こちらの神記事を見れば導入できるでしょう・・・。
Nuxt.jsの開発環境構築の手順（最初の一歩）

また、モードはspa(シングルページアプリケーション)ではなくuniversal(サーバーサイドレンダリング)です。
API: mode プロパティ - Nuxt.js

プロジェクトにaddする

何はともあれ追加よー

yarn add vue-awesome-swiper

pluginsフォルダに追加する

pluginsフォルダの中に、jsファイルを新規作成します。

plugins/vue-awesome-swiper.js

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

Vue.use(VueAwesomeSwiper) 

Vueのプラグイン使いますよー名前はVueAwesomeSwiperって言いますよー
みたいな感じのイメージ。

nuxt.config.jsに追記する

css、plugins、buildに追記します。

nuxt.config.js

module.exports = {
  css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper'
    ]
  }
}

SSR対応済みのプラグインであれば、pluginsの ssr:false 記述は不要です。
非対応プラグインの場合、ここ書き忘れちゃうとエラー吐きます

補足

複数のプラグインを呼ぶとき、書き方がわからなくて地味に詰まったので書いときます。
jsちゃんと履修してないのでこういうしょうもないところで引っかかりがち(ﾉД`)

nuxt.config.js

/* 複数書くときの例 */
module.exports = {
  css: [
    'swiper/dist/css/swiper.css',
    '~assets/css/style.scss'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false },
    { src: '~plugins/vue-scrollto' }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper',
      'vue-scrollto'
    ]
  }
}

マークアップ

index.vue

<template>
  <div>
    <swiper>
      <swiper-slide>スライド１</swiper-slide>
      <swiper-slide>スライド２</swiper-slide>
      <swiper-slide>スライド３</swiper-slide>
    </swiper>
  </div>
</template>

これで動くぞなもし！

オプション

オプションが大量にあるのでやりたいことはきっとできるはず。
できること一覧がわかりやすくまとめられています👇
vue-awesome-swiper

オプションの書き方例

index.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>スライド１</swiper-slide>
      <swiper-slide>スライド２</swiper-slide>
      <swiper-slide>スライド３</swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true, //無限ループ
        effect: 'fade', //切り替えをフェードに
        pagination: { //ページネーション設定
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: { //前へ・次へのナビ設定
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

よくあるスライダーはこんなかんじですかね！

CSSでちょっと引っかかったところ

• <div slot="pagination"> 内の <span class="swiper-pagination-bullet"> へのスタイルの当て方

CSSをscopedで書くのがVue/Nuxtの醍醐味だと思うのですが、ページネーションパーツはslotで配信されるので、スライド数を表す丸ポッチにdata-v-xxxxとかいうのが付いてないやないかーい指定できないYO! と悩みました。
これは、グローバルなCSSに書いてもいいですが、ディープセレクタを使えばおｋです。

scoped スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、>>> コンビネータを使用することができます:

>上記は以下にコンパイルされます:

>```
.a[data-v-f3f3eg9] .b { /* ... */ }

by スコープ付き CSS · vue-loader

おわりに

HTML/CSS/JS(jQuery)をコソコソと学んできた者としては、Swiperは強い味方感がすごいので、Vue/Nuxtでも同じように使えるのはとてもありがたいです。

ただSwiperは豪華モリモリ仕様なので、よりシンプルなスライダーでよければ「Vue Carousel」を使う選択もめちゃアリと思います。

👇こちらの記事がとてもわかりやすいです
【脱jQuery】Vue.jsで簡単に「カルーセル」を作る方法 – cmblog

Vue Carouselはシンプルでわかりやすかったのですが、スライドにフェードモードがないんですよね（将来的には付けたいとおっしゃってましたけども）。
そこ以外は基本機能カバーしてると思うので、使ってみてください

また、「Vue スライダー」とかで検索すると自作してる方もとても多いですね。
簡単ですし、自分で作ると楽しいので見よう見まねでやってみるのも楽しいですね！
案件でスライダーを自作するかと言われると、デザインの再現性とかもあるので微妙ですが

思ったより長くなってしまいましたが、Vue/Nuxt学びはじめのナカマに役に立ったら嬉しいです!!👋(^o^)👋ﾊﾞｲ