https://github.com/tonickkozlov/vue-tweet-embed
Embed tweets in your vue.js app
https://github.com/tonickkozlov/vue-tweet-embed
embed embed-tweets tweet tweet-component twitter vue vue2 vuejs
Last synced: 2 months ago
JSON representation
Embed tweets in your vue.js app
- Host: GitHub
- URL: https://github.com/tonickkozlov/vue-tweet-embed
- Owner: tonickkozlov
- Created: 2017-03-15T17:44:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:36:49.000Z (almost 3 years ago)
- Last Synced: 2024-11-14T08:56:39.118Z (11 months ago)
- Topics: embed, embed-tweets, tweet, tweet-component, twitter, vue, vue2, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.77 MB
- Stars: 111
- Watchers: 2
- Forks: 27
- Open Issues: 40
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
[](https://circleci.com/gh/tonickkozlov/vue-tweet-embed) [](https://greenkeeper.io/)
# vue-tweet-embed
Embed tweets in your vue.js app.
Inspired by https://github.com/capaj/react-tweet-embed
## Install
```
npm install vue-tweet-embed
```
## Supported components
Currently only Tweet and Moment components are supported form Twitter's widget API.
Components can be imported in one statement:
```javascript
import { Tweet, Moment, Timeline } from 'vue-tweet-embed'
```
or individually
```javascript
import Tweet from 'vue-tweet-embed/tweet'
import Moment from 'vue-tweet-embed/moment'
import Timeline from 'vue-tweet-embed/timeline'
```
Moment component can be used the same way Tweet component is used (see below).
## Quickstart
```javascript
import { Tweet } from 'vue-tweet-embed'
// test tweet not available or deleted
```
You don't have to put `//platform.twitter.com/widgets.js` script in your index.html as this lib will
put it there if `twttr` is not found on window.
## Using Options
### Tweet & Moment
```javascript
```
Embedded-Tweet Options Reference:
https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference
### Timeline
```javascript
```
Only `sourceType`: `profile`, `likes` and `list` are integrated. Embedded-Timeline Options Reference:
https://dev.twitter.com/web/embedded-timelines/parameters
## Showing a placeholder while the tweet is being loaded
To show some content to the user while the tweet is being loaded, just put it inside the Tweet
component. Placeholder content will be removed automatically once the tweet has finished loading.
```javascript
```
## Adding a custom class on the widget
To add an extra class on the container when the widget is loaded just add the class(es) with the prop: `widget-class`
```javascript
```
## Show some text if the tweet is unavailable
Tweets that could not be loaded can be replaced with custom text.
A custom class can be specifier as well.
```javascript
```
Custom html message:
```javascript
```