Nuxt.jsで外部JSを読み込みたい場合の対応メモ

概要

Nuxt.jsを触っていて、ふと外部のJSファイルを読み込むときどうすればいいんだろうと思って調べてみたのでメモとして残しておきます。

公式ドキュメントに記載の対応方法

外部リソースを使うには？に記載がある通り、アプリケーション全体で読み込む設定（グローバルな設定）とページ単位で読み込む設定（ローカルな設定）が可能です。

動的に読むスクリプトを変えたい場合の対応方法

あまりないケースかと思いますが、vue.js – VueJSコンポーネントに外部のJSスクリプトを追加する方法の通りcreatedやmounted時にJSを読み込ませることもできます。私はYahoo! JavaScriptマップAPIを使う際にAPIキーをフロント側に書くの嫌だなと思って、この方法でJSを読み込んでみました。以下がサンプルコードです。

Yahoo! JavaScriptマップAPIのJS読み込みサンプル

SamleComponemt.vue

<template>
  <div id="yahoo_map" style="width:400px; height:300px"></div>
</template>
<script>
export default {
  async mounted() {
    let mapScript = document.createElement('script');
    // サーバサイド側で読み込み用のJSを取得してここで設定
    let src  = await this.$axios.$get("http://127.0.0.1:8000/api/map");
    mapScript.appendChild(document.createTextNode(src));
    document.head.appendChild(mapScript);
    let ymap = new Y.Map("yahoo_map");
    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
  }
}
</script>