Skip to content

DannyFeliz/vue-tweet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 20, 2024
a922195 · Jun 20, 2024
Apr 6, 2022
Mar 29, 2024
Jun 12, 2024
Mar 29, 2024
Mar 29, 2024
May 10, 2021
Jun 12, 2024
Mar 29, 2024
Mar 29, 2024
Mar 29, 2024
Jun 20, 2024
Jun 20, 2024
Jun 11, 2024
Mar 29, 2024
Jun 11, 2024
Jun 11, 2024

Repository files navigation

vue-tweet

Vue 3 component that lets you embed tweets in your App by only giving the tweet id

Demo

Edit Vue Tweet

Preview

Installation

npm install vue-tweet --save

# or with yarn

yarn add vue-tweet

Usage

<script setup>
import Tweet from "vue-tweet";
</script>

<template>
  <Tweet tweet-id="1530240085807054848" />
</template>

Or using a tweet URL

<script setup>
import Tweet from "vue-tweet";
</script>

<template>
  <Tweet
    tweet-url="https://x.com/DannyFeliz08/status/1530240085807054848"
  />
</template>

Note: You must provide either tweet-id or tweet-url.

tweet-id

Type: string

Default: ''

The numerical ID of the desired Tweet.


tweet-url

Type: string

Default: ''

The Tweet URL.


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: "light"

Values: "light" | "dark"

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


width

Type: string | number

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" | "right" | "center" | 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 load the tweet.


tweet-load-error

Emitted after an error occurs while trying to get the tweet

Slots

loading

Slot for custom loading state.

<Tweet tweetId="20">
    <template v-slot:loading>
      <span>Loading...</span>
    </template>
</Tweet>

error

Slot for custom error state.

<Tweet tweetId="20">
    <template v-slot:error>
      <span>Sorry, that tweet doesn't exist!</span>
    </template>
</Tweet>

Development setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Locally preview production build

npm run serve

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

Customize configuration

See Configuration Reference.

Contributing

  1. Fork it (https://github.com/dannyfeliz/vue-tweet/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am "Add some fooBar")
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request