Neurotic Pantaloon Maker

    vue-tweet
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    vue-tweet

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

    This project was developed using Vue 3 + Typescript + Vite 🚀

    Demo

    Edit Demo 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://twitter.com/DannyFeliz08/status/1530240085807054848"
      />
    </template>

    Props - Embedded Tweet parameter reference

    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

    Install

    npm i vue-tweet

    DownloadsWeekly Downloads

    500

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • dannyfeliz