loading...

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

coolgoose profile image Alexandru Bucur ・1 min read

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

pic
Editor guide
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 ?