Hey guys, here’s a quick way of making google translate play nice using setInterval.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| 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