基本的な実装はこの辺りが参考になる。 https://qiita.com/nakanishi03/items/c12221be7645b84016c8 ## 相違点 [公式](https://github.com/surmon-china/vue-awesome-swiper)を参考に、説明する。 ### Install Swiper本体のインストールも必要になる。 ```bash yarn add swiper@5.x vue-awesome-swiper ``` ここで注意するのは、vue-awesome-swiperではSwiper5が推奨されているが、更新によりSwiper6が登場しているため最新版をインストールすると動作がおかしくなる(ページネーションやナビゲーションが機能しないなど)。 必ずバージョン指定をしよう。 ### CSS 上記記事には記載がないが、Global CSSとしてSwiperのCSSを登録する。 ```js /* 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> ``` 頻繁に更新されるライブラリはありがたいけど、アップデートで実装方法や動作が変わることが多いから注意が必要だね。