Nuxt.js Component to Embed Twitter Tweet

March 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=1

export 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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.