Easy Twitter Tweet Embed Component For Vue 3

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:

Easy Twitter Tweet Embed Component For Vue 3

Changelog:

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

Download Details:

Author: DannyFeliz

Live Demo: https://stackblitz.com/edit/vitejs-vite-c5qu9k?file=src%2FApp.vue

Download Link: https://github.com/DannyFeliz/vue-tweet/archive/refs/heads/main.zip

Official Website: https://github.com/DannyFeliz/vue-tweet

Install & Download:

# NPM
$ npm i vue-tweet

Add Comment