[Nuxt.js] vue-awesome-swiperを使う際の注意点

mayatasomayataso

基本的な実装はこの辺りが参考になる。

https://qiita.com/nakanishi03/items/c12221be7645b84016c8

相違点

公式(https://github.com/surmon-china/vue-awesome-swiper)を参考に、説明する。

Install

Swiper本体のインストールも必要になる。

yarn add swiper@5.x vue-awesome-swiper

ここで注意するのは、vue-awesome-swiperではSwiper5が推奨されているが、更新によりSwiper6が登場しているため最新版をインストールすると動作がおかしくなる(ページネーションやナビゲーションが機能しないなど)。

必ずバージョン指定をしよう。

CSS

上記記事には記載がないが、Global CSSとしてSwiperのCSSを登録する。

/* nuxt.config.js */
module.exports = {
    ...
    css: [
        ...
        'swiper/css/swiper.css'
    ],
}

SSRで動かしている場合

Nuxt.jsあるあるだが、SSR対応していないライブラリはSSRで動かすとバグる。
該当箇所をクライアントサイドのみで動作させよう。

  • Nuxtバージョンがv.2.9.0以上の場合
<client-only>
  <swiper>
    <swiper-slide>slide</swiper-slide>
  </swiper>
</<client-only>
  • Nuxtバージョンがv.2.9.0未満の場合
<no-ssr>
  <swiper>
    <swiper-slide>slide</swiper-slide>
  </swiper>
</<no-ssr>

頻繁に更新されるライブラリはありがたいけど、アップデートで実装方法や動作が変わることが多いから注意が必要だね。