Vue Google Translate Integration Component

2.0.20 · maintenance · verified Wed Apr 22

The `vue-gtranslate` package provides a Vue.js component designed to integrate Google Translate's 'Website Translator' widget into a Vue application. It facilitates on-the-fly page translation, supporting approximately 40 languages, and allows for basic visual customization through CSS classes. As of version 2.0.20, the project is actively maintained but explicitly cautions users about potential instability and the expectation of bugs, suggesting a more community-driven or less rigorously tested release cycle. Its core differentiator lies in simplifying the embedding process of the Google Translate script and its associated UI within a Vue component, thereby abstracting some of the direct DOM manipulation typically required. This solution wraps Google's client-side translation widget and does not offer an offline or server-side translation mechanism.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'TranslateElement')
```
cause The Google Translate external script (`element.js`) either failed to load, was blocked, or the `googleTranslateElementInit` callback was invoked before `google.translate` object was available.

fix Verify network connectivity, ensure no browser extensions are blocking the Google script, and confirm the `element.js` script and `googleTranslateElementInit` function are correctly embedded in your `index.html` file and loaded before your Vue application attempts to use `vue-gtranslate`.
```
The Google Translate widget is not visible or only shows a small flag icon without the language dropdown.
```
cause The target `div` for the Google Translate widget (e.g., `google_translate_element`) is missing from the DOM or hidden by CSS, or the `autoDisplay: false` option was used without a mechanism to trigger its display.

fix Ensure the `div` with the ID specified in `new google.translate.TranslateElement()` is present in your `index.html`. If you are manually controlling the widget's visibility, ensure your CSS or component logic correctly displays it. The `vue-gtranslate` component typically handles rendering it within its own template.

Warnings

gotcha The Google Translate Website Translator widget injects its own pop-up or banner by default. To hide this, you *must* import `vue-gtranslate/translator.css` into your application. Without it, users will see an additional 'Google Translate' banner.
Fix: Add `import 'vue-gtranslate/translator.css';` to your main Vue component or global stylesheet entry point.
gotcha The library explicitly states it 'may be unstable sometimes' and to 'expect bugs'. This indicates potential runtime issues, UI glitches, or unexpected behavior. It relies heavily on Google's external script, which is outside the control of this package.
Fix: Be prepared to implement custom CSS overrides or JavaScript workarounds for common issues. Monitor the package's GitHub issues for known problems and community solutions. Consider testing thoroughly in production-like environments.
breaking This package is merely a Vue wrapper around Google's client-side 'Website Translator' script. It critically depends on the external `element.js` script and the `googleTranslateElementInit` function being present and correctly initialized in your `index.html` file *before* your Vue application mounts. Failure to include this external script will result in the `Translator` component not functioning.
Fix: Ensure the `<script>` tags for `element.js` and the `googleTranslateElementInit` function are correctly placed in your `index.html` `<head>` or `<body>` section as demonstrated in the quickstart, and that the `google_translate_element` div exists in the DOM.

Install

npm install vue-gtranslate npm
yarn add vue-gtranslate yarn
pnpm add vue-gtranslate pnpm

Imports

Translator
wrong:
```
const Translator = require('vue-gtranslate');
```
correct:
```
import Translator from 'vue-gtranslate';
```
The primary component for rendering the Google Translate widget.
translator.css
wrong:
```
import 'vue-gtranslate/src/translator.css';
```
correct:
```
import 'vue-gtranslate/translator.css';
```
This CSS import is crucial for styling the widget and, importantly, for hiding the default Google Translate pop-up/banner. Ensure it's imported in your main app component or globally.

Quickstart

This quickstart demonstrates how to integrate `vue-gtranslate` into a Vue 3 application. It includes the necessary external Google Translate script setup in `index.html` and shows how to import and use the `Translator` component along with its crucial CSS for proper functionality and UI control.

<!-- public/index.html (or equivalent root HTML file) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue GTranslate App</title>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                { pageLanguage: "en", autoDisplay: false }, // autoDisplay: false to manage display via Vue
                "google_translate_element"
            );
        }
    </script>
    <script
        type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
    ></script>
</head>
<body>
    <div id="app"></div>
    <div id="google_translate_element" style="display: none;"></div> <!-- Hidden div for Google widget -->
    <script type="module" src="/src/main.js"></script> <!-- Assuming Vue CLI/Vite setup -->
</body>
</html>

// src/App.vue
<template>
  <div id="app">
    <h1>Welcome to My App</h1>
    <p>This content will be translated.</p>
    <Translator/>
  </div>
</template>

<script setup>
import Translator from "vue-gtranslate";
import "vue-gtranslate/translator.css"; // Important for styling and hiding pop-up
</script>

<style>
body {
  font-family: Arial, sans-serif;
}
.vg-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  justify-content: center;
}
.vg-container {
  padding: 5px 10px;
  font-size: 16px;
  text-align: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.vg-text {
  color: #333;
  padding-left: 5px;
}
.vg-items {
  display: flex;
  align-items: center;
}
.vg-flag {
  height: 24px;
  vertical-align: middle;
}
</style>

view raw JSON →