Edit components/Tweet.vue
.
The component accept either twitter oembed html (with omit_script=1
) or tweet id.
<template> <div v-html="oembedHtml"> <!-- <blockquote class="twitter-tweet" data-lang="en"> <p lang="en" dir="ltr">just setting up my twttr</p>— Jack (@jack) <a href="https://twitter.com/jack/status/20">March 21, 2006</a> </blockquote> --> </div></template><script>// https://publish.twitter.com/oembed?url=https://twitter.com/jack/status/20&omit_script=1export default { head: { script: [ { hid: 'twitter', type: 'text/javascript', src: '//platform.twitter.com/widgets.js', async: true, defer: true } ] }, props: ['oembedHtml', 'tweetId'], mounted() { if (this.tweetId) twttr.widgets.createTweet(this.tweetId, this.$el) else twttr.widgets.load(this.$el) }}</script>
Usage
<template> <div> <tweet :tweet-id="20" /> </div></template><script>import Tweet from '~/components/Tweet'export default { components: { Tweet }}</script>