LoginSignup
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-15

やりたかったこと

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に統一したい。
何かいい手を知ってる方が居たらアドバイスをお願いします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0