Nuxt上でフロントサイドライブラリを使うメモ

やりたかったこと

Nuxt上でTone.jsを使いたかった。
window is not definedっておこられた。
ESLintはStandardを使用。

公式ガイドラインにも記述がありますが、一部ハマったりしたのでメモ程度に書いています。

Tone.js

Web Audio APIを使いやすくするためのライブラリ。

対処法

.vueファイル内の読み込み

if (process.browser) {
  var Tone = require('tone')
}

vueファイル内の処理

if (process.browser) {
  console.log(Tone.Frequency('A3').toMidi())
}

ポイント

• if (process.browser)
  • サーバーサイドで実行しない
• require('tone')
  • importはインデント上で使えないためrequireを使用する

もやもや

やっぱりimportに統一したい。
何かいい手を知ってる方が居たらアドバイスをお願いします。