vue google translateダウンロード-Vue vue google translateソースコードダウンロード

Vue-Google-Translate

Webアプリのローカリゼーションを可能にするVue.jsパッケージ。

問題

このパッケージは、Vue-Gtranslateに重度に触発されました。

このパッケージは、Google翻訳を使用してVUEで作成されたWebアプリのローカリゼーションを可能にします。あなたのウェブサイトとアプリが成長するにつれて、あなたはあなたの母国以外の他の市場に拡大する必要があると感じるかもしれません。

ターゲット市場が海を横切って住んでいて、別の言語を話す場合、ローカライズする以外に選択肢がない場合があります。ただし、それらの人々があなたの言語を話すことができる場合は、他の側面（文化的および/または合法）を検討して、翻訳するかどうかについて情報に基づいた決定を下します。

ローカリゼーションと潜在的な利点の詳細については、この記事をチェックアウトしてください。

デモ

動作中のパッケージを表示するには、コードサンドボックスで確認してください。

インストール

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

使用法

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

任意のコンポーネントで使用します

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

export default {
  components: {
    Translator
  }
}

小道具

次の形式で多数の国を渡します

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

デフォルト言語の完全なリストは、このドキュメントの下部にあります。デフォルトリストにない新しい言語を追加する場合は、新しい言語を渡して追加のプロパティflagIconUrl渡します。これらのアイコンを調達するのに適した場所です。翻訳コードも有効なコードであることを確認してください。このWebサイトからサポートされている言語とそのコードを入手できます。

さらに、翻訳オブジェクトのキーとしてaltテキストを渡すことができます。これはアクセシビリティに役立ちます。あなたのカスタム翻訳はこのようなものになります。

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

オプションのエミットイベントも利用できます

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

スタイリング

Googleバナーを取り除きたい場合は、グローバルCSSファイルに次のCSSを挿入し、このファイルをMain/index.jsファイルにインポートします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 ;
}

デフォルト言語

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