Nuxt.jsでswiper（vue-awesome-swiper）を入れてみた

BLOG
知る。残す。伝える。

2020.05.10
Nuxt.js

Nuxt.jsでswiper（vue-awesome-swiper）を入れてみた

とりあえずswiperを入れてみたかったのでcssは省略

DEMO

※色々実験中なのですぐ消すかも
※Vercelで公開した

環境

macOS Mojave 10.14.6
Nuxt.js v2.12.2
npm 6.14.5

（1）vue-awesome-swiperをインストール

npm install swiper vue-awesome-swiper –save

コマンド参考

（2）プラグインファイルを作成

/plugins/vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

（3）nuxt.config.jsにプラグイン追加

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

【メモ】
Vueプラグインを使用する場合は「plugin」フォルダ内にてセットアップし、nuxt.config.jsに追加する必要がある

プラグイン（公式）

（4）ソース

/page/hoge.vue

<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

</template>

<script>
export default {
data () {
return {
banners: [
require('~/assets/images/img01.png'),
require('~/assets/images/img02.png'),
require('~/assets/images/img03.png'),
],
swiperOption: {
loop: true,
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 1000
},
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination'
},

// ...
}
}
},
mounted() {
console.log('Current Swiper instance object', this.mySwiper)
this.mySwiper.slideTo(3, 1000, false)
}
}

</script>

【メモ】
◎Nuxt.jsの場合、画像のパスの指定方法が場所によって違うよう。（詰んだ）
assetsフォルダ内の場合は「require(‘~/assets/images/img01.png’)」としなければならない

assets（公式）

救世主

◎画像をループさせずに並べる方法もあるようだが、Vueをなるべく使いたかったので「v-for」で画像を並べた

v-for（公式）

◎「mounted()」はelementが読み込まれてから実行される

ライフサイクル（公式）

救世主