

# 概要

Nuxt.jsでフロントエンドの開発をしております。  
スクロールした際に要素をふわっと表示させるため、下記Vue.jsドキュメントの通りに実装をしています。

[カスタムスクロールディレクティブの作成](https://jp.vuejs.org/v2/cookbook/creating-custom-scroll-
directives.html)

その際、`window is not defined`
のエラーが出ます。原因がわからず先に進むことができず困っています。ご教示のほどよろしくお願いいたします。

# エラー

`$yarn dev`コマンドにてローカルサーバー起動時

[![Image from
Gyazo](https://i.gyazo.com/edf7a874d0f8c19a6e871eafbced33a6.png)](https://gyazo.com/edf7a874d0f8c19a6e871eafbced33a6)

# コード

plugins/scroll.js

[code]

    import Vue from 'vue'
    
    Vue.directive('scroll', {
      inserted: function(el, binding) {
        let f = function(evt) {
          if (binding.value(evt, el)) {
            window.removeEventListener('scroll', () => f, false)
          }
        }
        window.addEventListener('scroll', () => f)
      }
    })
    
[/code]

nuxt.config.js

[code]

    ~略~
     plugins: [
        {
          src: '~plugins/scroll.js',
          ssr: false
        }
    ]
    
[/code]

pages/index.vue

[code]

    <template>
        <a
          class="return-btn fade-in"
          @click="$vuetify.goTo('#top')"
          v-scroll="handleScroll()"
          :class="{ show: isShown }"
        >
          <img
            class="return-btn-img"
            src="~assets/images/return_btn.svg"
            alt="return_button"
          />
        </a>
    </template>
    
    <script lang="ts">
    ~略~
      methods: {
        handleScroll: function(evt, el) {
          if (window.scrollY > 50) {
            el.setAttribute(
              'style',
              'opacity: 1; transform: translate3d(0, -10px, 0)'
            )
          }
          return window.scrollY > 100
        },
    </script>
    
[/code]

# 追記

2020/01/15 `nuxt.config.js`に `mode: client`を指定してみましたが、エラー文は変わりませんでした。

[code]

     plugins: [
        {
          src: '~plugins/scroll.js',
          mode: 'client'
        }
    
[/code]


CC BY-SA 4.0
2020-01-08T07:58:34.187
62062
2020-02-21T11:09:12.323
2020-01-15T05:52:52.953
36288
36288
question
vue.js nuxt.js
カスタムディレクティブにおける window is not defined エラー


`v-scroll`属性を持った`a`タグがサーバサイドでレンダリングされているためです。  
`a`タグを`<client-only>`で囲んでブラウザでレンダリングするように変更します。

[code]

    <client-only>
    <a
      class="return-btn fade-in"
      @click="$vuetify.goTo('#top')"
      v-scroll="handleScroll()"
      :class="{ show: isShown }"
    >
      <img
        class="return-btn-img"
        src="~assets/images/return_btn.svg"
        alt="return_button"
      />
    </a>
    </client-only>
    
[/code]


CC BY-SA 4.0
2020-02-21T11:09:12.323
63237
2020-02-21T11:09:12.323
7232
62062
answer