Trying to integrate a Google Translate widget onto my webpage has been a bit challenging. Initially, when I added it to a normal webpage, it worked smoothly using the following code:
<div class="google_translate" id="google_translate_element"></div>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
However, when I tried moving this setup to my VueJs project, it no longer functioned correctly. I suspected that the external script might be the issue, so I attempted to create a local JavaScript file and link it to my page, but encountered more problems. Can someone point out where I am going wrong here? My application is built using VueJS and webpack.
Within my VueJS page, I placed the googleTranslateElementInit function inside the mounted() block and continued calling the external scripts as I did on the normal page.
mounted () {
setTimeout(function (){
$('.article-list').masonry({
columnWidth: 208,
itemSelector: '.article-box',
fitWidth: true
});
},0)
$("#menu-pagetop").on("click", function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > $("#menu").offset().top || document.documentElement.scrollTop > $("#menu").offset().top) {
$("#menu-pagetop").is(".shown") || $("#menu-pagetop").stop().fadeIn(180).addClass("shown")
} else {
$("#menu-pagetop").is(".shown") && $("#menu-pagetop").stop().fadeOut(180).removeClass("shown");
}
}
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
}