Easy Twitter Tweet Embed Component For Vue 3

Install & Download:

# NPM
$ npm i vue-tweet

Description:

A Vue.js component that makes it easy to embed your Tweet into applications.

How to use it:

1. Import and register the vue-tweet component.

import { defineComponent } from "vue";
import Tweet from "vue-tweet";
export default defineComponent({
  components: {
    Tweet,
  },
});

2. Add the component to the template and insert your own Twitter ID.

<template>
  <Tweet
    tweet-id="Yout Twitter ID"
  >
    <template v-slot:loading>
      <span>Loading...</span>
    </template>
    <template v-slot:error>
      <span>Sorry, that tweet doesn’t exist!</span>
    </template>
  </Tweet>
</template>

3. Available component props.

tweetId: {
  type: String,
  required: true
},
conversation: {
  type: String as PropType<"all" | "none">,
  default: "all"
},
cards: {
  type: String as PropType<"visible" | "hidden">,
  default: "visible"
},
width: {
  type: [String, Number] as PropType<"auto" | number>,
  default: "auto"
},
align: {
  type: [String, undefined] as PropType<"left" | "right" | "center" | undefined>,
  default: undefined
},
theme: {
  type: String as PropType<"light" | "dark">,
  default: "light"
},
lang: {
  type: String as PropType<"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">,
  default: "en"
},
dnt: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

v2.2.1 (03/30/2024)

• Fix package modules

v2.2.0 (03/29/2024)

• Watch props properly
• Avoid loading multiple instances of the twitter script when used in a v-for

v2.0.2 (06/04/2022)

• Fix typescript types

v2.0.1 (05/31/2022)

• Fix typescript types

v2.0.0 (05/30/2022)

• Fix TypeScript definitions

v1.2.1 (04/13/2022)

• Fix TypeScript definitions

v1.2.0 (04/06/2022)

• Update publish script
• Update vite to the latest version
• Add config file
• Add config file
• Add husky folder
• Cleanup
• Add props validation

v1.1.3 (04/01/2022)

• Update