vue-tweet-embed とは
Quickstart のままだとツイートの読込中にエラーメッセージ表示が出てしまう
公式ドキュメントの Quickstart には、最低限の使い方についての説明があります。
つまり、
vue-tweet-embedをインストールして、importを行い、- コンポーネントを挿入する
という最低限の使い方です。ただこのままですと、ツイートの読み込み中の表示にはエラーメッセージが出てしまいます。
これを防ぐためには、ツイートを読み込んでいる最中は placeholder を見せるようにします。
placeholder の見せ方
公式ドキュメント にそのままのコンパクトな解説があります。
To show some content to the user while the tweet is being loaded, just put it inside the Tweet component. Placeholder content will be removed automatically once the tweet has finished loading.
<Tweet id="783943172057694208"><div class="spinner"></div></Tweet>
つまり、コンポーネントの中に適当な <div class="hogehoge"></div> を書いて、その中に読込中の表示内容を記述すればいいことになります*1。簡単です。
補足
import の際に
import Tweet from 'vue-tweet-embed'
と書くと import に失敗します。必ず {} を付けて、
import { Tweet } from 'vue-tweet-embed'
と書きます*2。
