Vueでwindowのグローバル変数を呼ぶときの話

概要

twitterのシェアボタンwidjetをあるオブジェクトがロードされてから表示するようにしたら、
widjetにならなかったので、twttr.widgets.load()で呼び出そうとしたら、
うまく呼び出せなくて、呼び出すことができた方法のメモです。

Twitterウィジェット

https://publish.twitter.com/#
上記のTwitter公式から生成したものですが、下記のようにwidjets.jsを読み込んで、class="twitter-share-button"を指定すると、aタグがtwitterのシェアボタンウィジェットになります。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

しかし、最初から表示されてるオブジェクトにしか適用されず、Vueのv-ifディレクティブを使用したりして動的にボタンを表示する場合は適用されません。
この場合、widjets.jsが読み込まれた際にグローバル変数に追加されるtwttrを利用して、twttr.widgets.load()をしてウィジェットを描画する必要があります。

非同期で読み込んだFacebook, Twitterボタンを再描画する

Vueの単一ファイルコンポーネントの場合

このとき、Vueの単一ファイルコンポーネントの場合、下記のようにscriptタグ内でtwttr.widgets.load()を呼ぼうとするとtwttrが存在しないと言われてしまいます。
どうやら、グローバル変数に直接アクセスができないことが問題のようでした。

twitter.vue

...
<script>
export default {
  name: 'Twitter',
  data () {
    return {
    }
  },
  methods: {
    reloadWidgets () {
      twttr.widgets.load()
    }
  }
}
</script>
...

ですので、この場合は下記のようにwindowからアクセスすることで、twttrにアクセスすることができ、twttr.widgets.load()を呼ぶことができます.

twitter.vue

...
<script>
export default {
  name: 'Twitter',
  data () {
    return {
    }
  },
  methods: {
    reloadWidgets () {
      window.twttr.widgets.load()
    }
  }
}
</script>
...

あとがき

色々試行錯誤していたため、書いてる最中にwindowをスクリプトタグから呼べるんじゃないかと気づきました。
試行錯誤中に試してはいたのですが、他の要因からうまくできなかったため、この記事を書いている最中は下記のように、
main.jsでVue.prototype.$twttrに変数を割り当ててインスタンスプロパティを設定する方法を紹介しようとしていました。
この方法だと、コンポーネント内からthis.$twttrで参照することができます。

main.js

Vue.prototype.$twttr = window.twttr

ちなみに、スマホから見るとなぜかwidjetsがundefinedと言われて、うまくウィジェット化できなかったため、
実際の実装ではhttps://twitter.com/intent/tweetを利用して、見た目は自作しました。