Danny Feliz has introduced an amazing vue 3 component that lets you embed tweets in your App by only giving the tweet id. This plugin also offers many customization options like theme, width, align, etc. You can visit this link to view its Demo.

Installation

You can install this package via npm or yarn.

//npm
npm install vue-tweet --save

//yarn
yarn add vue-tweet

Usage

After the installation, you can utilize this component in your application.

<template>
  <Tweet
    tweet-id="1370027087818461184"
    cards="visible"
    conversation="all"
    lang="en"
    theme="light"
    align="left"
    :width="400"
    :dnt="false"
    @tweet-load-error="onTweetLoadError"
    @tweet-load-success="onTweetLoadSuccess"
  >
    <template v-slot:loading>
      <span>Loading...</span>
    </template>

    <template v-slot:error>
      <span>Sorry, that tweet doesn’t exist!</span>
    </template>
  </Tweet>
</template>

<script>
import { defineComponent } from 'vue'
import Tweet from 'vue-tweet'

export default defineComponent({
  components: {
    Tweet
  },
  setup() {
    function onTweetLoadSuccess(embedNode) {
      console.log(embedNode)
    }

    function onTweetLoadError() {
      console.log("Ops... an error has occurred")
    }

    return { onTweetLoadSuccess, onTweetLoadError }
  }
})
</script>

Props - Embedded Tweet parameter reference

tweet-id

Type: string

Required

The numerical ID of the desired Tweet.

cards

Type: string

Default: visible

Values: visible | hidden

When set to hidden, links in a Tweet are not expanded to photo, video, or link previews.

conversation

Type: string

Default: all

Values: all | none

When set to none, only the cited Tweet will be displayed even if it is in reply to another Tweet.

theme

Type: string

Default: all

Values: light | dark

When set to dark, displays Tweet with light text over a dark background.

width

Type: string

Default: auto

Values: auto | number

The maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels.

align

Type: string | undefined

Default: undefined

Values: left | number | undefined

Float the Tweet left, right, or center relative to its container. Typically set to allow text or other content to wrap around the Tweet.

lang

Type: string

Default: en

Values: “ar” | “bn” | “cs” | “da” | “de” | “el” | “en” | “es” | “fa” | “fi” | “fil” | “fr” | “he” | “hi” | “hu” | “id” | “it” | “ja” | “ko” | “msa” | “nl” | “no” | “pl” | “pt” | “ro” | “ru” | “sv” | “th” | “tr” | “uk” | “ur” | “vi” | “zh-cn” | “zh-tw”

A supported Twitter language code. Loads text components in the specified language. Note: does not affect the text of the cited Tweet.

dnt

Type: boolean

Default: false

When set to true, the Tweet and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads.

Events

tweet-load-success

Type: HTMLElement

Attributes: (embedHtmlNode)

Emitted after successfully loading the tweet.

tweet-load-error

Emitted after an error occurs while trying to get the tweet

If you wanted to dig more you can visit its documentation and view the source code on Github.