What is the best way to uninstall the Google Translation Plugin when transitioning to a new Vue component?

Question

What is the best way to uninstall the Google Translation Plugin when transitioning to a new Vue component?

I'm facing a minor issue as I develop a website builder. It consists of two main parts: the builder and the preview section. Within the preview, I've included the Google Translation plugin:

onMounted(() => {
  new google.translate.TranslateElement({}, 'google_translate_element');
})

I have placed the script in index.html, just before closing <head>:

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

However, when I switch back to the builder from the preview and then return to the preview, my Google Translate plugin fails to load (although onMounted is triggered). The console doesn't show any errors. First load: https://i.stack.imgur.com/VsNqA.png Second load: https://i.stack.imgur.com/GDVws.png I attempted to remove the TranslateElement upon unmounting, but that didn't resolve the issue. Are there any other solutions I could explore? Thanks!

vue.js google-translate

Answer 1

Answer №1

I implemented the solution below and it was successful.

To ensure proper functionality, it is important to place the google translator script before closing the </body> tag. This is crucial because if the script, which is located in the </head>, experiences delays in loading (beyond your control), it could halt the entire page loading process until it finishes loading.

Your HTML structure should resemble the following:

<!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>

In your main.js or App.vue file, ensure you have this specific function and call it accordingly. I utilized the mounted hook within App.vue as shown below:

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

This approach has been tested on both Vue2 and Vue3 frameworks.

Answer 2

I implemented the solution below and it was successful.

To ensure proper functionality, it is important to place the google translator script before closing the </body> tag. This is crucial because if the script, which is located in the </head>, experiences delays in loading (beyond your control), it could halt the entire page loading process until it finishes loading.

Your HTML structure should resemble the following:

<!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>

In your main.js or App.vue file, ensure you have this specific function and call it accordingly. I utilized the mounted hook within App.vue as shown below:

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

This approach has been tested on both Vue2 and Vue3 frameworks.

What is the best way to uninstall the Google Translation Plugin when transitioning to a new Vue component?

Answer №1

Similar questions

The Selenium test functions correctly in the production environment, however it encounters issues when run

Executing a python script on the client side with the help of Vue.js

Solving the CORS problem between Vue.js and Flask: Troubleshooting XMLHttpRequest Blockade

Django Vue3 encounters access-control-allow-origin restriction

jinja2.exceptions.UndefinedError: The variable 'asset' has not been defined

What is the most efficient method for transferring Flask variables to Vue?

Flask static serving causes Vue app to not render

An error occurred: gyp ERR! stack - The command `python -c import sys; print "%s.%s.%s" % sys.version_info[:3]` has failed