Google Translate For The Specified Languages In Vue.js 3

GoogleTranslate.vue

<script setup>
const defaultLanguage = ref('tr')

const languages = reactive([
  {
    name: 'Türkçe',
    code: 'tr',  // 1. Language Codes      -> https://gist.github.com/JT5D/a2fdfefa80124a06f5a9
    flag: 'tu',  // 2. Language Flag URLs  -> https://www.kaggle.com/zhongtr0n/country-flag-urls
  },
  {
    name: 'English',
    code: 'en',
    flag: 'us',
  },
  {
    name: 'Українська',
    code: 'uk',
    flag: 'up',
  },
])

onMounted(() => loadGoogleTranslateScript())

function loadGoogleTranslateScript() {
  const script = document.createElement('script')
  script.src =
    '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'
  script.async = true
  document.head.appendChild(script)

  window.googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement(
      {
        pageLanguage: defaultLanguage.value,
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false,
      },
      'google_translate_element'
    )
  }
}
function changeLanguage(lang) {
  let googleTranslateComboBox = document.querySelector('.goog-te-combo')
  if (googleTranslateComboBox) {
    googleTranslateComboBox.value = lang
  }
  window.location = `#googtrans(${defaultLanguage.value}\|${lang})`
  location.reload()
}
</script>

<template>
  <ul class="list-unstyled flex space-x-3">
    <li v-for="language in languages" :key="language.code">
      <a
        :href="`#googtrans(${defaultLanguage}|${language.code})`"
        @click="changeLanguage(language.code)"
      >
        <img
          class="w-9"
          :src="`https://www.worldometers.info//img/flags/small/tn_${language.flag}-flag.gif`"
          :alt="language.name"
        />
      </a>
    </li>
  </ul>
</template>