Is there a way to translate a page after api responded and page is fully rendered?

[greatmaxix]

I am trying to use this package in a SPA vue app. I want to achieve translation after i get response from my api. Is it possible to do so, or it is limited to static pages only?

[i7eo]

This library supports dynamic translation. Because Google translate sdk provides class name notranslate to avoid translation.
You can try as follows:

<template>
    <div id="app" class="notranslate" ref="app">
        <button @click="handleAsyncTranslate">Async Test</button>
        <v-google-translate />
    </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleAsyncTranslate() {
      const appEl = this.$refs.app
      if (appEl.classList.contains("notranslate")) {
        appEl.classList.remove("notranslate");
      }
    }
  },
};
</script>

[greatmaxix]

Thank you, it seems to work. And another question is, translation is done only after I choose a language. Is there a way to translate the page without firstly choosing a language?

[i7eo]

Thank you, it seems to work. And another question is, translation is done only after I choose a language. Is there a way to translate the page without firstly choosing a language?

Of course there is.

1. use prop fetchBrowserLanguage turn off the setting to read the browser language, just like :fetchBrowserLanguage="false"
2. use prop defaultLanguageCode set your own language, just like defaultLanguageCode="de"
3. clear the cookie named googtrans

Please feel free to contact me if you still have any questions, and please mark this as the answer if there are no questions for now. Let's start another discussion👻