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

コード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

参考サイト

外部JSスクリプトをVueJSコンポーネントに追加する方法
これを解決する簡単で効果的な方法mounted()は、コンポーネントのビューに外部スクリプトを追加することです。Google Recaptchaスクリプトで説明します。 <template> .... your HTML </template> <script> export de...
ビスケットを送る
0

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました