vue-gtranslate2
problem
This package was heavily inspired by vue-gtranslate.
This package enables internationalization of web apps made with vue by use of google translate.
installation
yarn add vue-gtranslate2
npm i vue-gtranslate2
usage
//index.html
<head>
<script
type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>
<script type="text/javascript">
function googleTranslateElementInit2() {
new google.translate.TranslateElement(
{ pageLanguage: 'en', autoDisplay: false },
'app'
);
}
// app here can be changed to the default id of your vue app available in App.vue
</script>
<script
type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"
></script>
<script type="text/javascript">
/* <![CDATA[ */
eval(
(function(p, a, c, k, e, r) {
e = function(c) {
return (
(c < a ? '' : e(parseInt(c / a))) +
((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
);
};
if (!''.replace(/^/, String)) {
while (c--) r[e(c)] = k[c] || e(c);
k = [
function(e) {
return r[e];
},
];
e = function() {
return '\\w+';
};
c = 1;
}
while (c--)
if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
return p;
})(
"6 7(a,b){n{4(2.9){3 c=2.9(\"o\");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s('t'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a=='')v;3 b=a.w('|')[1];3 c;3 d=2.x('y');z(3 i=0;i<d.5;i++)4(d[i].A=='B-C-D')c=d[i];4(2.j('k')==E||2.j('k').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,'m');7(c,'m')}}",
43,
43,
'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|app|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split(
'|'
),
0,
{}
)
);
/* ]]> */
</script>
</head>import in your main.js or index.js and use globally
import VueTranslator from "vue-gtranslate2/dist/vue-gtranslate2.common.js";
Vue.use(VueTranslator)
don't forget the css import "vue-gtranslate2/dist/vue-gtranslate2.css;
This will get rid of the google banners in case you don't need them on your web app.
use in any component
<template>
<div>
<Translator />
<div>
</template>props
pass an array of countries in the following format
{
code: 'en|af',
title: 'Afrikaans',
},
{
code: 'en|sq',
title: 'Albanian',
},
{
code: 'en|ar',
title: 'Arabic',
},
{
code: 'en|hy',
title: 'Armenian',
},
{
code: 'en|az',
title: 'Azerbaijani',
},
{
code: 'en|eu',
title: 'Basque',
},
{
code: 'en|be',
title: 'Belarusian',
},
{
code: 'en|bg',
title: 'Bulgarian',
},
{
code: 'en|ca',
title: 'Catalan',
},
{
code: 'en|zh-CN',
title: 'Chinese (Simplified)',
},
{
code: 'en|zh-TW',
title: 'Chinese (Traditional)',
},
{
code: 'en|hr',
title: 'Croatian',
},
{
code: 'en|cs',
title: 'Czech',
},
{
code: 'en|da',
title: 'Danish',
},
{
code: 'en|nl',
title: 'Dutch',
},
{
code: 'en|en',
title: 'English',
},
{
code: 'en|et',
title: 'Estonian',
},
{
code: 'en|tl',
title: 'Filipino',
},
{
code: 'en|fi',
title: 'Finnish',
},
{
code: 'en|fr',
title: 'French',
},
{
code: 'en|de',
title: 'German',
},
{
code: 'en|el',
title: 'Greek',
},
{
code: 'en|hu',
title: 'Hungarian',
},
{
code: 'en|id',
title: 'Indonesian',
},
{
code: 'en|ga',
title: 'Irish',
},
{
code: 'en|it',
title: 'Italian',
},
{
code: 'en|ja',
title: 'Japanese',
},
{
code: 'en|ko',
title: 'Korean',
},
{
code: 'en|lt',
title: 'Lithuanian',
},
{
code: 'en|ms',
title: 'Malay',
},
{
code: 'en|no',
title: 'Norwegian',
},
{
code: 'en|pl',
title: 'Polish',
},
{
code: 'en|pt',
title: 'Portuguese',
},
{
code: 'en|ro',
title: 'Romanian',
},
{
code: 'en|ru',
title: 'Russian',
},
{
code: 'en|es',
title: 'Spanish',
},
{
code: 'en|sv',
title: 'Swedish',
},
{
code: 'en|th',
title: 'Thai',
},
{
code: 'en|tr',
title: 'Turkish',
},
{
code: 'en|uk',
title: 'Ukrainian',
}These are the available ones with images for now.
an optional emit event is also available as
<template>
<div>
<Translator @on-country-click="customEvent" :countries="arrayOfCountries" />
</div>
</template>
