{"id":16576,"library":"vue-gtranslate","title":"Vue Google Translate Integration Component","description":"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.","status":"maintenance","version":"2.0.20","language":"javascript","source_language":"en","source_url":"https://github.com/Katalyst33/vue-gtranslate","tags":["javascript","translator","vue js","gtranslate","google translate"],"install":[{"cmd":"npm install vue-gtranslate","lang":"bash","label":"npm"},{"cmd":"yarn add vue-gtranslate","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-gtranslate","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary component for rendering the Google Translate widget.","wrong":"const Translator = require('vue-gtranslate');","symbol":"Translator","correct":"import Translator from 'vue-gtranslate';"},{"note":"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.","wrong":"import 'vue-gtranslate/src/translator.css';","symbol":"translator.css","correct":"import 'vue-gtranslate/translator.css';"}],"quickstart":{"code":"\n\n\n\n \n \n Vue GTranslate App\n \n \n\n\n
\n
\n \n\n\n\n// src/App.vue\n\n\n\n\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Add `import 'vue-gtranslate/translator.css';` to your main Vue component or global stylesheet entry point.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure the `