Nuxt.js環境下にSwiperを導入してみる。

高性能かつ手軽に導入できるスライダープラグインのSwiperを普段からよく使っています。

シンプルHTML&CSSサイトやWordPress対応サイトでは、利用しているのである程度の導入までの流れはわかるのですが、Nuxt環境下での導入の仕方がよく分からなかったので調べてみた結果を備忘録として残しておきます。

//ターミナル
yarn add swiper@5.x vue-awesome-swiper

様々な記事を見たのですが、vue-awesome-swiperのみをインストールする手順からの説明ばかりでした。しかし、swiper本体もインストールする必要があるようです。(違ったらすみません)

次に、pluginsディレクトリ直下に「vue-awesome-swiper.js」を作成します。
作ったJSファイルに下記を記述。(//vue-awesome-swiper.jsは要りません)

//vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

記述をしたら作成したプラグインをnuxt.config.js に登録します。

//nuxt.config.js

export default {
 plugins: [
   { src: '~/plugins/vue-awesome-swiper', mode: 'client' }
 ],
}

最後にスライダーを動かしたい箇所に以下を記述します。
今回は、index.vueに記述しました。

<template>
 <swiper :options="swiperOption">
   <swiper-slide>Slide 1</swiper-slide>
   <swiper-slide>Slide 2</swiper-slide>
   <swiper-slide>Slide 3</swiper-slide>
 </swiper>
</template>

<script>
export default {
 data() {
   return {
     swiperOption: {
       slidesPerView: 1,
       loop: true,
     },
   }
 },
}
</script>

以上でNuxt環境下でSwiperを導入し使えるようにするまでの流れが終わりになります。
スライダーは沢山オプションが用意されているので、色々調べてみてください。また、間違っている点がありましたらご連絡ください！