Nuxt.jsとHeadressCMSを組み合わせてサイトを作っていたのですが、Tweetの埋め込みが表示されていないのに気が付きました。
原因はなんとなくはわかっているのですが対処方法を考えてたところnpm packageが合ったのでそれを利用しました。
vue-tweet-embedの利用方法
vue-tweet-embedを使えば、Tweet, Moment, Timelineの埋め込みが可能になります。
今回はTweetの埋め込み方法をご紹介します。
設定手順
インストール
import { Tweet, Moment, Timeline } from 'vue-tweet-embed'
登録
使用したいvueのところで
import { Tweet } from 'vue-tweet-embed'
component登録
components:{
Tweet,
},
template内
ツイートのIDを取得して挿入。
<Tweet id="692527862369357824"></Tweet>
最後に
これだけで、Tweetが表示されるはずです。
特定のページ以外でも使うのであれば、globalなcomponentとして登録しておくほうが使いやすいかも知れませんね。