Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dannyfeliz/vue-tweet
Vue 3 component that let you embed tweets in your App by only giving the tweet id
https://github.com/dannyfeliz/vue-tweet
embed-tweets twitter typescript vue vue3 vue3-typescript vuejs
Last synced: about 3 hours ago
JSON representation
Vue 3 component that let you embed tweets in your App by only giving the tweet id
- Host: GitHub
- URL: https://github.com/dannyfeliz/vue-tweet
- Owner: DannyFeliz
- License: mit
- Created: 2021-05-10T04:21:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-20T09:40:52.000Z (5 months ago)
- Last Synced: 2024-10-28T15:28:51.947Z (11 days ago)
- Topics: embed-tweets, twitter, typescript, vue, vue3, vue3-typescript, vuejs
- Language: Vue
- Homepage: https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41
- Size: 963 KB
- Stars: 36
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-tweet
Vue 3 component that lets you embed tweets in your App by only giving the tweet id
[
](https://www.npmjs.com/package/vue-tweet)
[
](https://www.npmjs.com/package/vue-tweet)
## Demo
[](https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41)
[](https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41)
## Installation
```bash
npm install vue-tweet --save
# or with yarn
yarn add vue-tweet
```
## Usage
```vue
import Tweet from "vue-tweet";
```
Or using a tweet URL
```vue
import Tweet from "vue-tweet";
```
# Props - [Embedded Tweet parameter reference](https://developer.x.com/en/docs/twitter-for-websites/embedded-tweets/guides/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.
```vue
Loading...
```
**error**
Slot for custom error state.
```vue
Sorry, that tweet doesn't exist!
```
## 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](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
### Customize configuration
See [Configuration Reference](https://vitejs.dev/guide/#command-line-interface).
# Contributing
1. Fork it ()
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