vue google translate Download - vue google translate Quellcode Download

Vue-Google-Translate

Ein Vue.js -Paket, das die Lokalisierung von Web -Apps ermöglicht.

Inhaltsverzeichnis

Problem
Demo
Installation
Verwendung
- Requisiten
Standardsprachen
Lizenz

Problem

Dieses Paket war stark von Vue-Gtranslate inspiriert.

Dieses Paket ermöglicht die Lokalisierung von Web -Apps, die mit VUE mithilfe von Google Translate hergestellt wurden. Wenn Ihre Website und Ihre App wächst, müssen Sie möglicherweise außerhalb Ihres Heimatlandes auf andere Märkte expandieren.

Wenn Ihr Zielmarkt über das Meer lebt und eine andere Sprache spricht, haben Sie möglicherweise keine Wahl, sondern zu lokalisieren. Wenn diese Personen jedoch Ihre Sprache sprechen können, berücksichtigen Sie andere Aspekte (kulturell und/oder legal), um eine fundierte Entscheidung darüber zu treffen, ob sie übersetzt werden sollen.

Weitere Informationen zu der Lokalisierung und den potenziellen Vorteilen finden Sie in diesem Artikel.

Demo

Um das Paket in Aktion anzuzeigen, lesen Sie es in Code Sandbox.

Installation

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

Verwendung

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

Verwendung in einer beliebigen Komponente

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

export default {
  components: {
    Translator
  }
}

Requisiten

Geben Sie im folgenden Format eine Reihe von Ländern übergeben

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

Eine vollständige Liste der Standardsprachen befindet sich am Ende dieses Dokuments. Wenn Sie in der Standardliste eine neue Sprache hinzufügen möchten, übergeben Sie die neue Sprache mit und zusätzliche Eigenschaften flagIconUrl . Hier ist ein guter Ort, um diese Symbole zu beschaffen. Stellen Sie sicher, dass der Übersetzungscode ebenfalls gültig ist. Sie können die unterstützten Sprachen und ihre Codes von dieser Website erhalten.

Zusätzlich können Sie einen ALT -Text als Schlüssel im Übersetzungsobjekt übergeben. Dies ist nützlich für die Zugänglichkeit. Ihre benutzerdefinierten Übersetzungen würden ungefähr so aussehen.

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

Eine optionale Emit -Veranstaltung ist ebenfalls erhältlich als

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

Styling

Sollten Sie die Google -Banner loswerden, fügen Sie die folgenden CSS in eine globale CSS -Datei ein und importieren diese Datei in Ihre Main/Index.js -Dateien in 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 ;
}

Standardsprachen

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