
Nuxt.jsでSwiperを導入したい場合は、vue-awesome-swiperライブラリを使えばOK!
今回は、SwiperをNuxt.jsでも導入できる「vue-awesome-swiper」についての導入方法や使い方について紹介していきます!
Nuxt.jsでvue-awesome-swiperを使ってSwiperを導入する
vue-awesome-swiperとは?
SwiperをVue Component化してくれているライブラリが「vue-awesome-swiper」です。
vue-awesome-swiperを使ってみる
vue-awesome-swiperをインストール
npm i swiper vue-awesome-swiper
pluginsフォルダ配下にvue-awesome-swiper.jsファイルを作成
複数箇所で、vue-awesome-swiperを使うことが考えられるので、pluginsフォルダ配下にvue-awesome-swiper.js
ファイルを作成します。
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
※ importするcssに関しては、swiperのメジャーバージョンによって違うので、注意が必要!
nuxt.config.jsのpluginsに追記
nuxt.config.js
ファイル内のpluginsに下記を追記します。
module.exports = {
plugins: [
{ src: 'plugins/vue-awesome-swiper.js' }
]
}
Swiper用のコンポーネントを用意して、Swiperを動かす

SwiperTest.vue
ファイルを作成し、実際にSwiperを動かしてみます。
index.vue
<template>
<swiper-test></swiper-test>
</template>
<script>
import SwiperTest from "../components/SwiperTest.vue";
export default {
components: {
SwiperTest
}
}
</script>
SwiperTest.vue
<template>
<swiper class="swiper" :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
}
}
}
}
}
</script>
<style scoped>
.swiper {
height: 300px;
width: 100%;
}
.swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: $font-size-huge * 2;
background-color: $white;
}
</style>
ちなみに、以下のページにvue-awesome-swiperのサンプルがたくさん記載されているので参考にしてみると良いです!

以上、最後まで読んでいただきありがとうございました!
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント