Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 記述は不要です。
非対応プラグインの場合、ここ書き忘れちゃうとエラー吐きます:scream_cat:

補足

複数のプラグインを呼ぶとき、書き方がわからなくて地味に詰まったので書いときます。
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>スライド1</swiper-slide>
      <swiper-slide>スライド2</swiper-slide>
      <swiper-slide>スライド3</swiper-slide>
    </swiper>
  </div>
</template>

これで動くぞなもし!

オプション

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

オプションの書き方例

index.vue
<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>スライド1</swiper-slide>
      <swiper-slide>スライド2</swiper-slide>
      <swiper-slide>スライド3</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に書いてもいいですが、ディープセレクタを使えばおkです。

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

<style scoped>
.a >>> .b { /* ... */ }
</style>

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

.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はシンプルでわかりやすかったのですが、スライドにフェードモードがないんですよね(将来的には付けたいとおっしゃってましたけども)。
そこ以外は基本機能カバーしてると思うので、使ってみてください:thumbsup:

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

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

whike_chan
フロントエンドエンジニアです と胸を張って名乗りたいブー
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした