Vue-CLIでTweetを埋め込む方法 | 鯖缶オープンソースがけ

　昨日（今日かも）やってたサイト作りのつづきでツイート埋め込みができないかと思っていたんだけど、Vue-CLI Tweet 埋め込みで散々検索してたどり着くのは一年以上前のvue-tweet-embedの記事ばかり…… どうしたものかと思っていたところ、別のスクリプトを埋め込みたい兄貴の記事が見つかったので、それを加工したところ実にうまくいったので記録しておく。そういやあと、Vue3.xってまだ流行ってないのかなかなかいい記事に出会わない…

トップページ（home.vue）でツイートの埋め込みがしたい場合は以下の通り。

views/Home.vue:

...>8.cut...
<a class="twitter-timeline" data-lang="ja" data-dnt="true" href="https://twitter.com/******?ref_src=twsrc%5Etfw">Tweets by ******</a>
...>8.cut...

<script>
export default {
  name: 'Home',
  components: {
  },
  //---ここから
  mounted() {
      let tweetScript = document.createElement('script')
      tweetScript.setAttribute('src', 'https://platform.twitter.com/widgets.js')
      document.head.appendChild(tweetScript)
  }
  //---ここまで
};
</script>

要はマウントした段階で要素を入れて実行させる感じなので、多分どの外部スクリプトでもだいたい実行が可能なんじゃないかと思います。

heightとかの細々したのはここで設定できるので大丈夫だと思います。あとはまだ調べてないので、必要になったら加筆します。

マジで助かりました。

追記
参考文献

追記

　すごい表示が不安定だったので、タイミング調整とasync属性追加しました。

views/home.vue:

mounted() {
  setTimeout(() => {
    let tweetScript = document.createElement('script')
    tweetScript.setAttribute('src', 'https://platform.twitter.com/widgets.js')
    tweetScript.setAttribute('async', 'true')
    document.head.appendChild(tweetScript)
  }, 100)
}