Descargar vue google translate - Descargar el código fuente vue google translate

Vue-Google-Translate

Un paquete Vue.js que permite la localización de aplicaciones web.

Tabla de contenido

Problema
Manifestación
Instalación
Uso
- Accesorios
Idiomas predeterminados
Licencia

problema

Este paquete estaba fuertemente inspirado en Vue-gtranslate.

Este paquete permite la localización de aplicaciones web hechas con Vue mediante el uso de Google Translate. A medida que crece su sitio web y su aplicación, es posible que encuentre la necesidad de expandirse a otros mercados fuera de su país de origen.

Si su mercado objetivo vive en todo el mar y habla un idioma diferente, es posible que no tenga más remedio que localizar. Sin embargo, si esas personas pueden hablar su idioma, considere otros aspectos (culturales y/o legales) para tomar una decisión informada sobre si traducir.

Para obtener más detalles sobre qué es la localización y los beneficios potenciales, consulte este artículo.

Manifestación

Para ver el paquete en acción, échale un vistazo en Code Sandbox.

Instalación

 yarn add vue-google-translate
npm i vue-google-translate

Uso

//index.html

< head >
  < script type =" text/javascript " >
    function googleTranslateElementInit ( ) {
      new google . translate . TranslateElement (
        { pageLanguage : 'en' , autoDisplay : false } ,
        'app'
      ) ;
    }
    // app can be changed to the default id of your vue app available in App.vue or an id section of where
    // you need translated
  </ script >
  < script
    type =" text/javascript "
    src =" https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit "
  > </ script >
  < script
    type =" text/javascript "
    src =" https://cdn.jsdelivr.net/gh/lewis-kori/vue-google-translate@main/src/utils/translatorRegex.js "
  > </ script >
</ head >

Usar en cualquier componente

import { Translator } from 'vue-google-translate';
< template >
< div >
< Translator />
< div >
</ template >

export default {
  components: {
    Translator
  }
}

accesorios

pasar una variedad de países en el siguiente formato

 [
  {
    code : 'en|af' ,
    title : 'Afrikaans' ,
  } ,
  {
    code : 'en|ar' ,
    title : 'Arabic' ,
  } ,
  {
    code : 'en|ko' ,
    title : 'Korean' ,
  } ,
  {
    code : 'en|lt' ,
    title : 'Lithuanian' ,
  } ,
] ;

Una lista completa de los idiomas predeterminados está en la parte inferior de este documento. Si desea agregar un nuevo idioma que no esté en la lista predeterminada, pase el nuevo idioma y la propiedad adicional flagIconUrl . Aquí hay un buen lugar para obtener estos íconos. Asegúrese de que el código de traducción también sea válido. Puede obtener los idiomas compatibles y sus códigos de este sitio web.

Además, puede pasar un texto ALT como clave en el objeto de traducción. Esto es útil para la accesibilidad. Tus traducciones personalizadas se verían así.

 [
  {
    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' ,
  } ,
] ;

Un evento de emisión opcional también está disponible como

< template >
  < div >
    < Translator @ on-country-click = " customEvent " : countries = " arrayOfCountries " />
  </ div >
</ template >

estilo

Si desea deshacerse de los banners de Google, inserte los siguientes CSS en un archivo CSS global e importe este archivo en sus archivos principales/index.js dentro de src

 /* 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 ;
}

Idiomas predeterminados

 [
  {
    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' ,
  } ,
] ;