Nuxt.js で vue-carousel を使おうとしたときに、 window is not defined とだけ表示され、固まる

Vue CarouselをNuxtで使おうとするときに、少し戸惑ったのでメモ。

カルーセルをComponentとして公式に書いてあるのを参考に、以下のように用意した。

<template>
  <carousel>
    <slide>abc</slide>
    <slide>xyz</slide>
    <slide>123</slide>
  </carousel> 
</template>


<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Carousel, Slide } from 'vue-carousel';

@Component({
  components: {
    Carousel,
    Slide
  }
})

export default class FrontispieceCarousel extends Vue {}
</script>

しかし、このまま npm run dev で確認しようとしても、 「window is not defined」 と表示され、かつ、なにやら無限ループか何かにハマっているのか、エラーが最後まで表示されず、ファンが異様な音を出し始める・・・。

色々調べてたところ、以下の記事にたどり着き、Carousel と Slide をそれぞれ個別に import してあげると解決できました。

qiita.com

<template>
  <carousel>
    <slide>abc</slide>
    <slide>xyz</slide>
    <slide>123</slide>
  </carousel> 
</template>


<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Carousel from 'vue-carousel/src/Carousel.vue';
import Slide from 'vue-carousel/src/Slide.vue';

@Component({
  components: {
    Carousel,
    Slide
  }
})

export default class FrontispieceCarousel extends Vue {}
</script>