Skip to content
On this page

What is @google-translate-select

@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:

GitHub package.json version (subfolder of monorepo)

GitHub package.json version (subfolder of monorepo)

GitHub package.json version (subfolder of monorepo)

Geting Started

English

Install

bash
pnpm add @google-translate-select/vue2
# yarn add @google-translate-select/vue2
# npm install @google-translate-select/vue2
bash
pnpm add @google-translate-select/vue3
# yarn add @google-translate-select/vue3
# npm install @google-translate-select/vue3
bash
pnpm add @google-translate-select/react
# yarn add @google-translate-select/react
# npm install @google-translate-select/react

Usage

vue
<template>
  <GoogleTranslateSelect
    default-language-code="en"
    default-page-language-code="en"
    :fetch-browser-language="false"
    trigger="click"
    @select="handleGoogleTranslateSelect"
  />
</template>
<script lang="ts">
import Vue from 'vue';
import GoogleTranslateSelect from '@google-translate-select/vue2';

export default Vue.extend({
  methods: {
    handleGoogleTranslateSelect(language) {
      console.log(language)
    },
  },
})
</script>
vue
<template>
  <GoogleTranslateSelect
    default-language-code="en"
    default-page-language-code="en"
    :fetch-browser-language="false"
    trigger="click"
    @select="handleGoogleTranslateSelect"
  />
</template>
<script setup lang="ts">
import GoogleTranslateSelect from '@google-translate-select/vue3';

const handleGoogleTranslateSelect = (language: any) => {
  console.log(language)
}
</script>
tsx
import GoogleTranslateSelect from '@google-translate-select/vue3';

function App() {
  const handleGoogleTranslateSelect = (language: any) => {
    console.log('select', language)
  }

  return (
    <GoogleTranslateSelect
      defaultLanguageCode="en"
      defaultPageLanguageCode="en"
      fetchBrowserLanguage={false}
      trigger="click"
      select={handleGoogleTranslateSelect}
    />
  )
}

Refactor

I rewrote this project using pnpm + changeset + typescript + vite + tsup, use monorepo to manage project. The package name is @google-translate-select.

The previous google-translate-select package move to repo backup/master, if you want to check it, click here.

I refactor previous google-translate-select 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.

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.

TIP

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.

Read more about changeset here

Get involved

PRs Welcome

We appreciate any help on our repositories. For more details about how to contribute to a package, see the README of the corresponding package.

Reach out to us

Create an issue using one of the templates File an issue

Make sure to remove any credential from your code before sharing it.

Contributors

Thanks goes to these wonderful people (emoji key):

hyj
hyj

💻
suxiong
suxiong

💻

License

This repository is published under the MIT license.