• HOME
  • Nuxt.js環境下にSwiperを導入
TomoyaOkada

Nuxt.js環境下にSwiperを導入

記事をシェアする


高性能かつ手軽に導入できるスライダープラグインのSwiperを普段からよく使っています。
シンプルHTML&CSSサイトやWordPress対応サイトでは、利用しているのである程度の導入までの流れはわかるのですが、
Nuxt環境下での導入の仕方がよく分からなかったので調べてみた結果を備忘録として残しておきます。

ターミナルからインストール

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


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


vue-awesome-swiper.jsを作成

次に、pluginsディレクトリ直下に「vue-awesome-swiper.js」を作成します。
作った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を導入し使えるようにするまでの流れが終わりになります。
スライダーは沢山オプションが用意されているので、色々調べてみてください。また、間違っている点がありましたらご連絡ください!

記事をシェアする