vue-gtranslate

library2.0.20jsnpmunverified

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.

llm-agents ai-ml

npm install vue-gtranslate

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-GTRANSLATE

vue-gtranslate

llm-agentsjavascriptv2.0.20

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Translator

✓ import Translator from 'vue-gtranslate';

✗ const Translator = require('vue-gtranslate');

The primary component for rendering the Google Translate widget.

translator.css

✓ import 'vue-gtranslate/translator.css';

✗ import 'vue-gtranslate/src/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.

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.

<!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>  <script type="module" src="/src/main.js"></script>  </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>

Debug

Known issues

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

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: All

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'TranslateElement')

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.

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.

Upgrade

Version history

2.0.20latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

42 hits · last 30 days

node

Perplexity

OpenAI (training)

Resources

githubhttps://github.com/Katalyst33/vue-gtranslate ↗

packagehttps://www.npmjs.com/package/vue-gtranslate ↗