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:

Geting Started #

Install #

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

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

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

Usage #

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

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

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.

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 #

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

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

Contributors #

Thanks goes to these wonderful people (emoji key):

hyj 💻

suxiong 💻

License #

This repository is published under the MIT license.