search
LoginSignup
0

More than 3 years have passed since last update.

posted at

updated at

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

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
What you can do with signing up
0