LoginSignup
4

More than 3 years have passed since last update.

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

Posted at

環境

nuxt 2.4.0
vue-carousel 0.18.0

現象

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

ReferenceError: window is not defined

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

参考サイト

実装方法

~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についてしっかり理解して進めないと色々ハマっていきそうだと思いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4