Nuxt.js + TypeScriptでvue-awesome-swiperを使う

Nuxtでスライダーを使いたかったので、良さげなライブラリを導入してみる。

環境

• Windows 10 Pro
• WSL Ubuntu
• yarn -v -> 1.17.3
• node -v -> v12.10.0
• npm list nuxt -> nuxt@2.9.2
• npm list vue -> vue@2.6.10

セットアップ

コマンドを打ってインストール

yarn add vue-awesome-swiper

plugins

plugins/vue-awesome-swiper.js

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

Vue.use(VueAwesomeSwiper)

nuxt config

nuxt.config.ts

import { Configuration } from '@nuxt/types'

const config: Configuration = {
  css: [
    'swiper/dist/css/swiper.css',
  ],

  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false },
  ],
}

export default config

動かしてみる

hoge.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>う</swiper-slide>
      <swiper-slide>ん</swiper-slide>
      <swiper-slide>ち</swiper-slide>

      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class Hogeeeeee extends Vue {
  swiperOption: object = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  }
}
</script>

オプションとかは、https://surmon-china.github.io/vue-awesome-swiper/ を参照してみてください。

参考

こちらの記事を参考にさせていただきました！
@IKEMAKI さん、ありがとうございました。