google translate select

🚀 A modern, high-performance monorepo project designed with Google Translate JS SDK. Vue and react are supported!

372

Vue

@google-translate-select

This project inherits from v-google-translate. The previous v-google-translate package move to branch backup/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
- Vitepress for @google-translate-select
- Playground for @google-translate-select
Commits & releases
Get involved
Reach out to us
License
Contributors

Refactor

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.

Origin

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.

Usage

Support Languages

see GOOGLE_TRANSLATE_SELECT_LANGUAGES in https://github.com/i7eo/google-translate-select/blob/master/packages/constants/src/web/languages.ts

Props

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

Tips

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 set defaultPageLanguageCode manually. For example: defaultPageLanguageCode = "zh-CN"

Inspire

This package was heavily inspired by vue-google-translate.

Development

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 check pnpm version.

Vitepress for @google-translate-select

We use vitepress with our library to develop document. You can start it from the root of the repo, just run pnpm dev:docs

Playground for @google-translate-select

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.

Commits & releases

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.