I'm facing an issue with loading the Twitter timeline in my Vue app. Initially, the timeline loads correctly, but after navigating or refreshing the page, it disappears.
I have attempted to load the widgets.js file using the mounted function:
mounted: function () {
//TWITTER
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.widgets.load();
}
I am using twttr.widgets.load(); to dynamically load the widget as per this documentation: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization.
It should be noted that I am encountering the following error in the console, indicating that when calling twttr.widgets.load();, the widgets.js file is not available:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'load' of undefined"
Any suggestions?