4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?