vue-gtranslate

vue-gtranslate

Install

yarn add vue-gtranslate
npm i vue-gtranslate

Caution

• Add Translate.css to hide Google Translate pop up
• Plugin may be unstable sometimes, expect bugs

Features

• On the Fly page translation
• Supports 40 languages
• Easy to customize

Usage

• Customize using css classes provided.

//index.html

<head>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                    { pageLanguage: "en" },
                    "google_translate_element"
            );
        }
    </script>
    <script
            type="text/javascript"
            src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
    ></script>
</head>

//app.vue
<template>
  <div id="app">
    <Translator/>
  </div>
</template>

<script>

import Translator from "vue-gtranslate";
import "vue-gtranslate/translator.css"

export default {
  name: 'App',
  components: {
    Translator
  }
}
</script>

<style>

    .vg-body{
        display: grid;
        grid-template-columns: auto auto auto;
        padding: 10px;
        background: lightgrey;
    }

    .vg-container{
        padding: 20px;
        font-size: 30px;
        text-align: center;


    }
    .vg-text{
        color: black;
        padding-left:10px
    }

    .vg-items{
        display:flex;
        align-items:center;

    }

    .vg-flag{
        height:40px;
    }


</style>