[Vuejs]-How to remove Google Translation Plugin when navigating to a different Vue component?

by

0👍

I did it the following way here and it worked.

First, you need to place the google translator script before closing the </body>, this because if this script for some reason that is not in your control takes a while to load, because it is in the </head>, it will stop loading the page until it completes the loading of this script.

Your html will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="app"></div>
    <div id="google_translate_element"></div>

    <script type="module" src="/src/main.js"></script>

    <script
      type="text/javascript"
      src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
    ></script>
  </body>
</html>

Now your main.js or App.vue file should contain this function and then its invocation. I used mounted inside App.vue and it worked:

{
mounted () {
  this.googleTranslateElementInit()
},
methods: {
  googleTranslateElementInit () {
    window.google.translate.TranslateElement(
      { pageLanguage: "en" },
      "google_translate_element"
    );
  }
}

Tested on vue2 and vue3.

Leave a comment