【Nuxt.js】ReferenceError: window is not defined ってエラーが出た

// この記事は、 note に投稿した記事の再掲です。

Nuxt.js だと SSR の影響で window とか document を使うとエラーが出るらしい。

// "ReferenceError: window is not defined" って言われる
window.addEventListener(scroll, myFunc);

回避方法が公式ドキュメントにあったのでメモ。

.vue ファイル内での処理

if (process.browser) {
  // ここに window とか document を使った処理
}

外部ライブラリを使う場合

.vue ファイル内

if (process.browser) {
  require('外部ライブラリのパス');
}

nuxt.config.js にも該当ライブラリを追加しておく

build: {
  vendor: ['外部ライブラリのパス']
}

参考

window または document が undefined のときは？
https://ja.nuxtjs.org/faq/window-document-undefined/