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>

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

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

Tags:

Setup Algolia InstantSearch on Nuxt/Vue

Nuxt.js Add Markdown Pages

Nuxt.js dotenv Configuraton for Development and Production

Nuxt.js Install Vue.js Plugins (Universal SSR usage)

Simple Guide to Nuxt.js (Vue.js SSR)

Nuxt Fetch Show Loading

Nuxt Fetch Handle Error / Show Error Page

Nuxt (>= 2.12) Fetch

Nuxt Route Params