Embed tweets just by giving the ID of a Tweet
npm install vue-tweetVue 3 component that lets you embed tweets in your app by only providing the tweet ID.


``bash
npm install vue-tweet
Usage
$3
`vue
`$3
`vue
`$3
`vue
`Props
> Note: You must provide either
tweet-id or tweet-url.For detailed information about embedded tweet parameters, see the Embedded Tweet parameter reference.
$3
- Type:
string
- Default: ''
- Description: The numerical ID of the desired tweet.$3
- Type:
string
- Default: ''
- Description: The tweet URL.$3
- Type:
'visible' | 'hidden'
- Default: 'visible'
- Description: When set to 'hidden', links in a tweet are not expanded to photo, video, or link previews.$3
- Type:
'all' | 'none'
- Default: 'all'
- Description: When set to 'none', only the cited tweet will be displayed even if it is in reply to another tweet.$3
- Type:
'light' | 'dark'
- Default: 'light'
- Description: When set to 'dark', displays tweet with light text over a dark background.$3
- Type:
'auto' | number
- Default: 'auto'
- Description: The maximum width of the rendered tweet in whole pixels. This value should be between 250 and 550 pixels.$3
- Type:
'left' | 'right' | 'center' | undefined
- Default: undefined
- Description: Float the tweet left, right, or center relative to its container. Typically set to allow text or other content to wrap around the tweet.$3
- Type:
TweetLang
- 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'
- Description: A supported Twitter language code. Loads text components in the specified language. Note: does not affect the text of the cited tweet.$3
- Type:
boolean
- Default: false
- Description: 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
$3
- Type:
(embedHtmlNode: HTMLElement) => void
- Description: Emitted after successfully loading the tweet.$3
- Type:
(error: Error) => void
- Description: Emitted when an error occurs while trying to load the tweet.Slots
$3
Slot for custom loading state.
`vue
Loading tweet...
`$3
Slot for custom error state.
`vue
Sorry, that tweet doesn't exist!
`Complete Example
`vue
tweet-id="1530240085807054848"
theme="dark"
cards="hidden"
conversation="none"
:width="400"
align="center"
lang="en"
:dnt="true"
@tweet-load-success="onTweetLoaded"
@tweet-load-error="onTweetError"
>
Loading tweet...
`Development Setup
`bash
Install dependencies
npm installStart development server
npm run devBuild for production
npm run buildPreview production build
npm run previewType checking
npm run type-checkLint files
npm run lint
`TypeScript Support
This package includes TypeScript definitions. You can import the component and types:
`typescript
import VueTweet, { type TweetProps, type TweetLang } from 'vue-tweet'
`Contributing
1. Fork it ()
2. Create your feature branch (
git checkout -b feature/awesome-feature)
3. Commit your changes (git commit -am 'Add some awesome feature')
4. Push to the branch (git push origin feature/awesome-feature`)MIT