Nuxt.js Component to Embed Twitter Tweet

Mar 28, 2020

Edit components/Tweet.vue.

The component accept either twitter oembed html (with omit_script=1) or tweet id.

<template>  <div v-html="oembedHtml">    <!--    <blockquote class="twitter-tweet" data-lang="en">      <p lang="en" dir="ltr">just setting up my twttr</p>&mdash; Jack (@jack) <a href="https://twitter.com/jack/status/20">March 21, 2006</a>    </blockquote>     -->  </div></template><script>// https://publish.twitter.com/oembed?url=https://twitter.com/jack/status/20&omit_script=1export default {  head: {    script: [      { hid: 'twitter', type: 'text/javascript', src: '//platform.twitter.com/widgets.js', async: true, defer: true }    ]  },  props: ['oembedHtml', 'tweetId'],  mounted() {    if (this.tweetId)        twttr.widgets.createTweet(this.tweetId, this.$el)    else        twttr.widgets.load(this.$el)  }}</script>

Usage

<template>  <div>    <tweet :tweet-id="20" />  </div></template><script>import Tweet from '~/components/Tweet'export default {  components: { Tweet }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.