Vue/Nuxtでtwitter Widgetを使う方法

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として登録しておくほうが使いやすいかも知れませんね。

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール