Vue.jsで外部のスクリプトを読み込む方法

2020/12/06

#Vue.js/Nuxt.js

Vue-cliで開発していてCDN経由で外部のスクリプト(recaptcha)を読み込もうとした際にハマったのでメモ

main.js

mounted(){
    let recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
    document.head.appendChild(recaptchaScript)
  }


読み込んだ関数を呼び出すときは関数名の前にwindow.をつけると読み込めます。

window.grecaptcha


参考サイト


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js