@google-translate-select bug report

Summary

Environment

The issu is located in two environments:

• My local windows-mashine in dev.
• My published site on Vercel

Steps to reproduce

1. Create a nuxt3-starter-repo
2. Create a component for GoogleTranslate. Link to my component on github.
3. Create two nav-components, one for the top and one for the bottom.
4. Load both in the same window or only bottom-nav in mobil etc.
5. Load both of the nav-components on the same time (maybe this creates the error?).
6. Load GoogleTranslate-component in both of the nav-components.
7. Add a class to the element in bottom-nav with have the classname google-translate-select-dropdown__menu

// Example css-code
.drop-up-btn {
  top:-1000% !important;
  bottom: 100%
} 
// This is my very simple solution to make a popup.

8. Add a script to add the drop-up-btn-class to the element.

// Example of javascript who also is acecpted as typescript
onMounted(() => {
  changeLanguage.count = 0 // debugging-tool
  function changeLanguage () {
    console.log('ChangeLanguage starting ... DropUpBtn clicked ' + changeLanguage.count)
    const dropUpBtn = document.getElementsByClassName('google-translate-select-dropdown__menu')[1]
    dropUpBtn.classList.add('drop-up-btn')
    changeLanguage.count = +1
  }
  const parentEl = document.getElementsByClassName('google-translate-select-dropdown__activator')[1]
  parentEl.setAttribute('id', 'dropUpBtn') // debugging-tool
  parentEl.addEventListener('click', changeLanguage)
})
console.log('FooterNav.vue finish loading.')

Comment

I will try to load only one of the nav-components at a time, to check if the error disappear.

Posting the result later in this week.

If someone will reproduce the error it is possibly to use this simple starter-kit and insert the GoogleTranslate-component to places on the index-page (instead of making two nav-components).

The error will show up only on click on the first select-button.

这个翻译在线的话，需要开启VPN才能正常翻译，但是大部分人是无法翻墙的，就用不了了，有什么解决方案么？

help me How to exclude some words that do not need to be translated
vue 3

How can I use this library in nuxt js? It doesn't work for me.

@google-translate-select bug report

Summary

When using this component with vue-router, when I hit the back button in the browser I'm getting the following error:
Uncaught (in promise) TypeError: unref(...).stop is not a function...google-translate-select.vue?vue&type=script&lang.ts:381

Environment & Usage

Using Vue3 and Chrome browser.

My component usage looks like so:

<template>
    <div class="border-b border-b-gray-200 pb-8">
        <h3 class="text-2xl text-primary pb-4 pl-1">
            <font-awesome-icon icon="fa-solid fa-comment" size="xl" class="text-primary"></font-awesome-icon>&nbsp;&nbsp;Translate
        </h3>
        <GoogleTranslateSelect
            default-language-code="en"
            default-page-language-code="en-GB"
            :fetch-browser-language="true"
            @select="handleGoogleTranslateSelect"
            class="border border-gray-400 rounded"
            trigger="click"
        />
    </div>
</template>

<script setup>
import GoogleTranslateSelect from '@google-translate-select/vue3'

const handleGoogleTranslateSelect = (language) => {

}
</script>

Hi @i7eo,

I am trying to get the outcode like the below picture:

the plugin is not allowing me to override the CSS:

For remove logo
div.eo__languages .eo__dropdown__menu .language .flag { background-image: none !important; }

I don't know how to show the dropdown selected option as language code.

The translation seems to be fragmented in most cases.

For instance, I'm trying to translate from Swedish (original) to Thai and get this:
"Det är öppet สำหรับ betatest-ansökningar"

So only 1 word in that sentence got translated.

Hi, as screenshot below, Vietnamese don't have logo...

I just met a situation when I changed a lot of code of a language, then on another page it will translate according to each language I have selected before, then it will translate to the last language I have just selected. Don't know how to solve it. Tried to reload in @select, it reloads continuously.

@google-translate-select bug report

Hebrew language doesn't display

When I click on the hebrew language in the dropdown nothing happens, the instruction remains on the original language or on the previously selected one.

Environment

Mozilla Firefox / Google Chrome

Steps to reproduce

Using the component and choosing the hebrew language

Expected results

The language displays well

Actual results

The language doesn't display

@google-translate-select bug report

Summary

When there is a long paragraph inside the page and the language is different from English the translation does not work correctly for several languages even if the defaultLanguageCode property of the component is correctly set.

Environment

• Ubuntu 20.04
• Mozilla Firefox / Google Chrome
• Vue.js

Steps to reproduce

• Write one or more long paragraphs in a language other than English on any html page.
• Use de language selector for Vue.js and select any language other than English.

Example:

Original language: German
Target language: Arab

Expected results

• The selected language is correctly displayed in the interface consistently.

Actual results

• Some languages do not work when selected and the some paragraphs are partially translated

@google-translate-select bug report

Summary

this is the type error am getting when i run it on nextjs

TypeError: (0 , index3_mjs__WEBPACK_IMPORTED_MODULE_3_.jsx) is not a function

Environment

Next.js 14.2.4

I tested using both chrome and brave but it safe to assume that the problem is simply next.js

Steps to reproduce

1. install on nextjs

npm install npm install @google-translate-select/react

2. import and use it

"use client"


import GoogleTranslateSelect from "@google-translate-select/react";
 
export default test = () => {
return (
  <div>
          <GoogleTranslateSelect
            defaultLanguageCode="en"
            defaultPageLanguageCode="en"
            fetchBrowserLanguage={false}
            trigger="click"
            select={handleGoogleTranslateSelect}
          />
        </div>
);
}

3. Run it

npm run dev

Expected results

to work like how it works on the projects i have used on vue

Actual results

1. 使用国内翻译插件

2. 定时任务下载语言包

把这个请求地址换一下就好了

之前是“//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”
换成“//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit”

把com换成cn，**就能访问

我试了一下是可以的，但是又遇到另外一个问题，这个supportedLanguages加载失败，我换成.cn之后是可以访问到资源的，但是没有找到这个是在哪里调的接口。

这个代码如果是你写的话，我觉得你可以优化优化，这样国内的兄弟们就能用了，万分感谢。

ps：我现在是把你的组件移植到我的components下面使用的。

望回复，谢谢！

Propose changing to //translate.google.com.

https://github.com/i7eo/v-google-translate/blob/b987bdff3be6f56251ea96798b75f9b40cadbd3c/src/packages/src/index.vue#L452

@google-translate-select contribution proposal

The problem

• 遇到的问题: 加载的 spinner 不会消失(无限循环)
• 影响: 会导致左上返回按钮被阻挡无法返回
• 触发时机: 未知
• 版本: "@google-translate-select/vue3": "^0.1.0"

css

spinner html

The proposed solution

透过 props 隐藏 spinner 动画

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency jsdom to v22
• chore(deps): update dependency postcss-preset-env to v9
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency tsup to v7
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency vite to v4
• chore(deps): update dependency vite-plugin-dts to v3
• chore(deps): update pnpm to v8
• fix(deps): update dependency prettier to v3
• fix(deps): update dependency stylelint-config-recommended to v13
• fix(deps): update dependency stylelint-config-recommended-scss to v12
• fix(deps): update dependency stylelint-config-standard to v34
• fix(deps): update dependency stylelint-config-standard-scss to v10
• fix(deps): update dependency stylelint-order to v6
• fix(deps): update dependency vue to v3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@changesets/assemble-release-plan, @changesets/cli, @changesets/config, @commitlint/cli, @commitlint/config-conventional, @types/gulp, @types/prettier, @types/react, @types/react-dom, @types/semver, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitejs/plugin-legacy, @vitejs/plugin-react, @vitejs/plugin-vue, @vitejs/plugin-vue-jsx, @vitest/ui, @vue/test-utils, autoprefixer, chalk, clean-css, czg, esbuild, esbuild-plugin-copy, esbuild-sass-plugin, eslint, eslint-config-prettier, eslint-plugin-import, eslint-plugin-jsonc, eslint-plugin-vue, inquirer, jsdom, jsonc-eslint-parser, lint-staged, octokit, pnpm, postcss, postcss-preset-env, postcss-scss, prettier, sass, semver, stylelint, stylelint-config-prettier, terser, tsup, tsx, turbo, typescript, vite, vite-plugin-css-injected-by-js, vite-plugin-dts, vite-plugin-vue2, vitepress, vitest, vue, vue-template-compiler, yaml-eslint-parser)
• chore(deps): update actions/stale action to v8
• chore(deps): update dependency @manypkg/get-packages to v2
• chore(deps): update dependency @types/jsdom to v21
• chore(deps): update dependency @vitejs/plugin-legacy to v4
• chore(deps): update dependency @vitejs/plugin-react to v4
• chore(deps): update dependency consola to v3
• chore(deps): update dependency stylelint to v15
• chore(deps): update dependency vite-plugin-css-injected-by-js to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

这个项目非常好用, 但无奈我是后端开发, 没有能力修改此项目支持 Vue3, 希望作者可以支持下

报错信息：vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: this.doGTranslate is not a function"

而且示例里面也报错：

你好，问一下报这个错 是缺什么依赖包吗？vue2

How to translate 1 page only?

@google-translate-select bug report

I sometimes get this error when I click on a dropdown language option. This only happens after I navigate away from the page the component is mounted on and when I switch back to the page and try again it doesn't work. I assume the component options aren't ready yet by the rime it's mounted?

Summary

Environment

Using Vue 2.7

Steps to reproduce

Expected results

To switch to the language clicked on the dropdown

Actual results

The language switch doesn't work because of this error

1. 单独建一个分支（repo:next）专门提供给vue3使用

2. 使用 monorepo 分别管理vue2、vue3的包（完全替换当前repo:master代码）

3. 使用 vue-demi 兼容 vue2、vue3写法（完全替换当前repo:master代码）

#15 #22

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: node

@google-translate-select bug report

im using this pacakge as vue3 component how to deselect lang and use per translated content by a switch ?

@google-translate-select contribution proposal

The problem

I went through hell when i wanted to use the package and after 2 days i finally found the npm package which you have not attached to any docs or github, In order to save others i request that you may add it

The proposed solution

Add it https://www.npmjs.com/package/@google-translate-select/vue3

说实话，我也不知道这是不能翻译还是bug，不过还是想提一下的。

这是codesand复现的地址：https://codesandbox.io/s/v-google-translate-demo-forked-pnv53v?file=/src/App.vue

就是谷歌翻译完之后，点击添加价格的按钮，数量就不会再发生任何变化了。下面添加了 notranslate 的类的价格，倒是发生了变化

我看npm上面 v-google-translate 是链到了这个库来着，所以我就直接在这里提了

The style of this plug-in is too restrictive, and it does not provide incoming style modification. If you want to modify it, you need to make intrusive style modification. It doesn't feel perfect. If you can provide a way to pass parameters, you can customize the style. In this case, it can be more handy to use

If you have some dynamic content, would it be nice to expose the triggerTranslate method to translate the content or basically a way to re-trigger the translation apart from clicking the dopdown

Hey, I'm the author of vue-google-translate.
Just wanted to commend you for the good work here.

@google-translate-select contribution proposal

The problem

Hi there, I was hoping to add in Welsh as an extra language to the below, please:
packages/constants/src/web/languages.ts

The proposed solution

export const GOOGLE_TRANSLATE_SELECT_LANGUAGES_CODES = [
'cy',
] as const

export const GOOGLE_TRANSLATE_SELECT_LANGUAGES: Language[] = [
  {
    code: 'cy',
    name: 'Welsh',
    cname: '威尔士语',
    ename: 'Welsh',
  },
]

Hi @i7eo ,
I wanted to set the Chinese language by default when users log in to the platform.
Example:
<v-google-translate defaultLanguageCode="ar"></v-google-translate>
While implementing the above code initially it shows the Arabian language then after the page loads, it is set to English. Any clue?