Hey guys, here's a quick way of making google translate play nice using setInterval.
export default {
mounted: function()
{
this.$nextTick(() => {
this.googleTranslateInit();
});
},
methods: {
googleTranslateInit: function() {
let checkIfGoogleLoaded = setInterval(() => {
if (google.translate.TranslateElement != null) {
clearInterval(checkIfGoogleLoaded);
this.googleTranslateElement('google_translate_element');
}
}, 100);
},
googleTranslateElement: function(id) {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, id);
}
},
};
It's not always easy to have a nice callback available for google translate, especially if you're nested into a component. I'm only using NUXT's external resources setup for directly loading the library, and ignored creating a plugin for this (although I think that's still valid, to create a script and use an onLoad function
Top comments (3)
Surely binding to
onMutationevent handler, then just initing on the root element is the way to go?hey Lewis, sounds, interesting. How would you do it in that case ? I assume you're talking about MutationObservers right ?
hi
i use this code but i have this error in console:
index.vue?6ced:29 Uncaught ReferenceError: google is not defined
google in google.translate.TranslateElement