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

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.

Tags:

Related entries:

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 Route Params

Nuxt.js Add Sitemap for Static Site Generate

Setup Firebase Analytics for Nuxt.js

Setup vue-chart.js in Nuxt.js