export default {
components: {
Translator
}
}
```
### props
pass an array of countries in the following format
```javascript
[
{
code: 'en|af',
title: 'Afrikaans',
},
{
code: 'en|ar',
title: 'Arabic',
},
{
code: 'en|ko',
title: 'Korean',
},
{
code: 'en|lt',
title: 'Lithuanian',
},
];
```
A full list of the [default languages is at the bottom of this doc](#default-languages).
If you wish to add a new language not in the default list, pass the new language with and additional property `flagIconUrl`.
[Here's a good place](https://flagicons.lipis.dev/) to source these icons.
Ensure the translation code is a valid one as well.
You can get the supported languages and their codes from [this website](https://www.labnol.org/code/19899-google-translate-languages#google-translate-languages).
Additionally you can pass an alt text as a key in the translation object. This is useful for accessibility.
Your custom translations would look something like this.
```javascript
[
{
code: 'en|iw',
title: 'Hebrew',
flagIconUrl: 'https://flagicons.lipis.dev/flags/4x3/il.svg',
altText: 'Hebrew language translation',
},
{
code: 'ga|pl',
title: 'Polish',
flagIconUrl: 'https://flagicons.lipis.dev/flags/4x3/pl.svg',
altText: 'Poland flag Icon',
},
];
```
An optional emit event is also available as
```vue
```
### styling
should you wish to get rid of the google banners, insert the following css in a global css file and import this file in your main/index.js files inside `src`
```css
/* gets rid of the banner at the top of the page */
body {
top: 0 !important;
}
/* get rids of the banner at the bottom of the web page */
.skiptranslate {
display: none !important;
}
```
#### Default languages
```javascript
[
{
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',
},
];
```
## License
vue-google-translate is an open source software licensed under [MIT](https://github.com/lewis-kori/vue-google-translate/blob/main/LICENSE).