vue-tweet

Vue 3 component that lets you embed tweets in your app by only providing the tweet ID.

Demo



Installation

``bash
npm install vue-tweet

or with yarn

yarn add vue-tweet

or with pnpm

pnpm add 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



`

$3

Slot for custom error state.

`vue



`

Complete Example

`vue



`

Development Setup

`bash


Install dependencies

npm install

Start development server

npm run dev

Build for production

npm run build

Preview production build

npm run preview

Type checking

npm run type-check

Lint 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`)
5. Create a new Pull Request

License

MIT