Nuxt.jsでSwiperを使用するとエラーがでます。

Question

Nuxt.jsでSwiperを使用するとエラーがでます。
環境は以下です

OS: mac
node: v12.14.0
yarn: 1.21.1
vue: @vue/cli 4.1.2
mode: 'universal'

Nuxtにvue-awesome-swiperをインストールし

yarn add vue-awesome-swiper

pluginsフォルダに追加

import Vue from 'vue' 
import VueAwesomeSwiper from 'vue-awesome-swiper' 

Vue.use(VueAwesomeSwiper) 

nuxt.config.jsに追記

module.exports = {
  css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper'
    ]
  }
}

下記のようにマークアップします。

<template>
  <div>
    <swiper>
      <swiper-slide>スライド１</swiper-slide>
      <swiper-slide>スライド２</swiper-slide>
      <swiper-slide>スライド３</swiper-slide>
    </swiper>
  </div>
</template>

すると

ReferenceError: window is not defined　<swiper>
ReferenceError: window is not defined　<swiper-slide>

のエラーがでてきます。
ここまでは下記のURLを参考にしました。
https://qiita.com/whike_chan/items/c68e094f412b04b1afc2

原因がわからず下記のように
https://qiita.com/sauzar18/items/81ccfdb48c5e583ad027

マークアップを<swiper>ではなく普通のHTMLにswiperのクラスを追加するとうまくいきました。

<div
    v-swiper:mySwiper="swiperOption"
    class="swiper-container"
>
    <ul class="swiper-wrapper">
        <li class="swiper-slide">slide1</li>
        <li class="swiper-slide">slide2</li>
        <li class="swiper-slide">slide3</li>
        <li class="swiper-slide">slide4</li>
        <li class="swiper-slide">slide5</li>
        <li class="swiper-slide">slide6</li>
    </ul>
    <button
        class="swiper-button-prev"
        type="button"
    >
        前へ
    </button>
    <button
        class="swiper-button-next"
        type="button"
    >
        次へ
    </button>
</div>

こちらのほうで問題なくうごくのですが
<swiper><swiper-slide>でうごかない原因がよくわかりません。

なにか追加しないといけない設定などあるのでしょうか？

※追加しておいたほうがいい環境がありましたら追加します。

Answer 1

Swiperがサーバーサイドで動いていませんか？
windowオブジェクトがないというエラーですのでフロントで動くように記述されてはどうでしょうか。

<client-only>
  <swiper>
    <swiper-slide>slide</swiper-slide>
  </swiper>
</<client-only>

※Nuxt のバージョンがv2.9.0未満の場合、<client-only>のかわりに<no-ssr>を使用してください。

Comments

[ttkun]

サーバーサイドで動いていました。
<client-only>で正常に動きました。ありがとうございます。