This project inherits from v-google-translate. The previous
v-google-translate
package 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.js
library 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 setdefaultPageLanguageCode
manually. 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 use
in the root of the repo, and checkpnpm
version.
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 .
Make sure to remove any credential from your code before sharing it.
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 📖 |