【Nuxt.js】vue-awesome-swiperを導入

6542 ワード
swiper Vue.js nuxt.js Vue.js テキストリンク

はじめに

Nuxt.jsにて作っているサイトにてスライドショーを取り入れたかったのでvue-awesome-swiperを導入してみました。

導入

1.ライブラリのインストール

ドキュメントルート
npm install [email protected] vue-awesome-swiper

（追記）
Swiperのバージョンを6系だとペジネーション等がうまく動作しなかったため、明示的に5系をインストールするようにしました。公式でも推奨されていました。

2.プラグインに追加

plugins/vue-awesome-swiper.jsを作成

plugins/vue-awesome-swiper.js
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

Vue.use(VueAwesomeSwiper);

3.nuxt.config.jsに追記

nuxt.config.js
build: {
        vendor: ['vue-awesome-swiper']
    },
plugins: [
        { src: '@/plugins/vue-awesome-swiper.js', ssr: false }
    ],

以上で導入は完了です。

利用

試しにindex.vueに実装

index.vue
<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>スライダー１</swiper-slide>
      <swiper-slide>スライダー２</swiper-slide>
      <swiper-slide>スライダー３</swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 1, // 1枚に表示するスライド数
        loop: true // 最終ページの次にまた1枚目が表示される
      }
    };
  }
};
</script>

あれっ？

調べてみたところcssファイルの読み込みも必要でした。

plugins/vue-awesome-swiper.jsを作成
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css"; // 追記 swiper5系だとこれ

// import 'swiper/swiper-bundle.css' ちなみに6系だとこちらです

Vue.use(VueAwesomeSwiper);

動いた〜！

おわりに

とりあえず最低限ですがスライダーの導入ができました！
カスタマイズ性も高そうですのでこちらを使っていきたいと思います！

参考

【Vue.js】Vue.js(Nuxt.js)でスライダーを導入してみた【vue-awesome-swiper】
Nuxt.js環境下にSwiperを導入してみる。
ShopifyのBuy Button機能の活用 〜2.vue-awesome-swiperを使って多数の商品をスライダー表示する〜
Nuxtにvue-awesome-swiperを入れてスライドショーを実装する