How to use Embeded-tweet javaScript factory function with vuejs2(in .vue file)?

embeddedtweet
javascript

#1

How to use javascript factory function in .vue file of vuejs webpack template.
i am getting error in console like: “Uncaught (in promise) Error: No target element specified. Expected: ƒ(tweetId, target, [options]);”

I have tried with v-el, v-model, v-ref etc but couldn’t bind tweet with dom.

tweet.vue

<template>
  <div id="container"></div>
</template>

<script>
import appService from '../service'

export default {
  data() {
    return {
      tweets: {},
      tweetHtml: []
    }
  },
  created() {

  //javaScript factory function in vue

    twttr.widgets.createTweet('20',
    document.getElementById('container'))      //what should come here in 2nd args?
      .then( function( el ) {
        console.log('Tweet added.');
    });
  },
  methods: {
  },
  mounted(){   
  }
}
</script>
<style scoped>
</style>

#2

Hi there,
The problem here is that you need to create tweet widget after Vue.js rendered the DOM (use lifecycle hooks). I put together a jsfiddle with an example tweet embed https://jsfiddle.net/xjwg5466/. Note that I have no experience with Vue.js so you might need to get more help from their forums in some more advanced cases. There is an example in Vue.js docs for jQuery plugin which is essentially the same use case https://vuejs.org/v2/examples/select2.html.


#3

Thanks for your suggestion, i will try it.
Right now, i have managed with vue-tweet-embed - solution.


#4

hello,
is there any way that we can display message or image if tweet is not available or deleted?
or anyway we can handle it?


#5

Hi @Dhruv_Aerosol

We do not support display of deleted tweets.


#6

Hahahaha :smiley:
Actually you do.
i will show you soon… lol :smiley:


#7

I have noticed that if tweet is available then it returns {} or tweet data and Undefined for not available or deleted tweet.
so i am handling it to show message according to it.
Correct me if i am wrong.
You can look at This and your jsfiddle console logs.
So i can say you are supporting deleted tweets handling silently :wink: