This project inherits from v-google-translate. The previous
v-google-translatepackage move to branchbackup/master, if you want to check it, click here.
@google-translate-select is an open-source project to invoke google translate jssdk to translate your dispaly content, we support vue2/vue3/react as follows:
- Refatcor
- Origin
- Usage
- Inspire
- Development
- Commits & releases
- Get involved
- Reach out to us
- License
- Contributors
I rewrote this project using pnpm + changeset + typescript + vite + tsup, use monorepo to manage project. The package name is @google-translate-select.
I refactor previous v-google-translate package using typescript and renamed it @google-translate-select/vue2, if you want to check it, click here.
This package enables localization of web apps made with vue by use of google translate.As your website and app grows, you may find a need to expand to other markets outside your home country.
If your target market lives across the sea and speaks a different language, you may not have any choice but to localize.
For more details on what localization is and the potential benefits, checkout this article.
see GOOGLE_TRANSLATE_SELECT_LANGUAGES in https://github.com/i7eo/google-translate-select/blob/master/packages/constants/src/web/languages.ts
vue props see: https://github.com/i7eo/google-translate-select/blob/master/packages/vue3/src/types/props.ts
react props see: https://github.com/i7eo/google-translate-select/blob/master/packages/react/src/types/props.ts
-
Note that here we invoke
translate.google.com/translate_a/element.jslibrary file, the translation for the web pages of writing is the full amount. Only the translation of static content is supported without refreshing the page. -
For something you don't want to translate, add
class= "notranslate" -
I can give you an example of best practices: We are working on a cross-border e-commerce project. In this project, we need two functions, multi-language and multi-currency, to complete internationalization. For the price on the page, we don't want to be translated into multiple languages. So we added
class= "notranslate"to the price DOM to dynamically modify the price DOM information when the currency changes. -
Google Translate JS SDK default your page source language is English (code is
en), if your page source language is non-English language, please setdefaultPageLanguageCodemanually. For example:defaultPageLanguageCode = "zh-CN"
This package was heavily inspired by vue-google-translate.
For local development, in the root of the repo run pnpm i to install all dependencies and then pnpm build to build all packages. Now follow the instructions of the specific package you’re working on.
In case you are having problems to install the dependencies, try using NVM to get the same node version we use by running
nvm usein the root of the repo, and checkpnpmversion.
We use vitepress with our library to develop document. You can start it from the root of the repo, just run pnpm dev:docs
We use vite with our library to test it. You can start it from the root of the repo, just run pnpm dev:react or pnpm dev:vue2 or pnpm dev:vue3.
Use pnpm commit. This uses the cz-git CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new changeset.
Read more about changeset here
We appreciate any help on our repositories. For more details about how to contribute to a package, see the README of the corresponding package.
Create an issue using one of the templates 
This repository is published under the MIT license.
Thanks goes to these wonderful people (emoji key):
 hyj 💻 |
 suxiong 💻 |
 Chris Jones 💻 |
 Syamsoul Azrien Muda 💻 |
 HuaZhuangNan 💻 |
 Zero 📖 |