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