Nuxt.jsでVue carouselを使用した時に画像が読み込めない解決策

結論

• CarouselとSlideをそれぞれ別箇にimportする

発生した問題

Guide通りにComponentをimportしてslideタグ内に画像を挿入すると
ReferenceError: document is not defined
が発生する。

<template>
    <div>
        <carousel>
            <slide>
                <img src="@/assets/image/sample1.jpeg">
            </slide>
            <slide>
                <img src="@/assets/image/sample2.jpeg">
            </slide>
        </carousel>
    </div>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};
</script>

解決法

Carousel・SlideそれぞれのComponentをそれぞれ別箇にimportする

<script>
import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  }
}
</script>