Nuxtでvue-carouselを使用していたら'ReferenceError: window is not defined'が出たお話

環境

nuxt 2.4.0
vue-carousel 0.18.0

現象

nuxtにvue-caroucelを実装したが、下記のようなエラーになり
リロード時に画面がずっと読み込み状態になってしまった。

ReferenceError: window is not defined

どうやたSSR時に、documentやwindowにアクセスすると上記のエラーが発生するみたい

参考サイト

実装方法

~plugin/vue-caroucel.js

import Vue from 'vue'
import VueCarousel from 'vue-carousel'

Vue.use(VueCarousel)

nuxt.config.js

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

index.vue

<template>
  <div class="container">
    <carousel :navigation-enabled="true" :per-page="1">
      <slide v-for="(url, key) in images" :key="key">
        <div class="product-img">
          <img class="product-card-img" :src="url" />
        </div>
      </slide>
    </carousel>
  </div>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel'
export default {
  layout: 'client/simple',
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      hasError: false,
      images: [
        require('@/assets/img/NoImage.png'),
        require('@/assets/img/NoImage.png'),
        require('@/assets/img/NoImage.png'),
        require('@/assets/img/NoImage.png'),
        require('@/assets/img/NoImage.png'),
        require('@/assets/img/NoImage.png')
      ]
    }
  },
  methods: {
    async login() {}
  }
}
</script>

解決方法

各画面でのインポートのを下記のように書き換える

- import { Carousel, Slide } from 'vue-carousel'

+ import Carousel from 'vue-carousel/src/Carousel.vue'
+ import Slide from 'vue-carousel/src/Slide.vue'

まとめ

vueのモジュールをNuxtで使用するには色々とトラブルがあってなかなか大変です。。。
SSRについてしっかり理解して進めないと色々ハマっていきそうだと思いました。