Nuxt.jsでvue-slickを使う

前提条件

• Nuxt.jsでpugとstylusを使う

これを設定している

インストール

$ npm i -S vue-slick jquery slick-carousel

使う

slider.vue

<template lang="pug">
.slider
  client-only
    Slick(:options="slickOptions")
      .slider-item(v-for="i in 3" :key="i")
        img(src="https://placehold.jp/150x150.png")
</template>

<script>
import '~/node_modules/slick-carousel/slick/slick.css'

export default {
  components: {
    Slick: () => process.browser ? import('vue-slick') : null,
  },
  data: () => ({
    slickOptions: {
      swipe: true, // スワイプできるか
      slidesToShow: 1, // スライドを何個表示するか
      infinite: true, // ループさせるか
      vertical: false, // 縦に表示するか
      verticalSwiping: false, // 縦にスワイプできるか
      draggable: true, // マウスでドラッグできるか
      arrows: true, // アローを使うか
      prevArrow: '<div class="slide-prev"></div>', // 戻るアローのdomを指定
      nextArrow: '<div class="slide-next"></div>' // 次へアローのdomを指定
    }
  })
}
</script>

<style lang="stylus" scoped>
.slider
  img
    width 100%
</style>

Nuxt.jsのそのほか

• Nuxt.jsを使う