DEV Community

Alexandru Bucur
Alexandru Bucur

Posted on

Quick hack for using google translate (or other services) in Nuxt/Vue.js

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);
        }

    },
};
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

Collapse
lewiscowles1986 profile image
Lewis Cowles

Surely binding to onMutation event handler, then just initing on the root element is the way to go?

Collapse
coolgoose profile image
Alexandru Bucur Author

hey Lewis, sounds, interesting. How would you do it in that case ? I assume you're talking about MutationObservers right ?

Collapse
fezebr profile image
faezeh ebrahimy

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