Lingo.dev + .json (Vue.js)

Lingo.dev CLIはVue.jsのi18n JSONファイルを翻訳する際に、メッセージフォーマット、補間構文、およびVue固有の規則を保持します。CLIはvue-i18nライブラリとシームレスに連携し、すべてのVueメッセージフォーマットを維持し、{name}のようなプレースホルダーを保持し、@:構文によるメッセージリンクを正確に処理し、コンポーネント補間プレースホルダーをそのまま保持します。

クイックセットアップ

Vue.js i18nロケールファイル用の設定:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

注意: [locale]は設定内で文字通りのプレースホルダーとして残しておく必要があります。CLI実行時に実際のロケールに置き換えられます。

Vue i18nファイルの翻訳

npx lingo.dev@latest i18n

Vue.jsのメッセージフォーマット、補間プレースホルダー、およびvue-i18n固有の構文を保持します。

Vue i18nの機能

メッセージ補間

{
  "message": {
    "hello": "こんにちは{name}！",
    "welcome": "ようこそ{name}さん、{count}件のメッセージがあります"
  }
}

複数形ルール

{
  "car": "車 | 車",
  "apple": "リンゴがありません | リンゴが1個 | リンゴが{count}個"
}

リンクされたメッセージ

{
  "common": {
    "name": "アプリケーション名"
  },
  "welcome": "@:common.nameへようこそ"
}

Vueの@:メッセージリンク構文は保持されます。

高度なVue機能

HTMLメッセージのサポート

{
  "message": {
    "title": "<strong>当プラットフォーム</strong>へようこそ",
    "link": "<a href='/help'>ヘルプセンター</a>をご覧ください"
  }
}

コンポーネント補間

{
  "message": {
    "terms": "{0}利用規約{/0}と{1}プライバシーポリシー{/1}に同意します"
  }
}

コンポーネント補間のプレースホルダー構文はそのまま保持されます。

日時と数値のフォーマット

{
  "datetime": {
    "short": "{value}",
    "long": "{value}"
  },
  "number": {
    "currency": "{value}"
  }
}

高度な設定

複数のロケールディレクトリ

"vue-json": {
  "include": [
    "src/locales/[locale].json",
    "src/i18n/[locale]/*.json"
  ]
}

Vue固有のキーをロックする

"vue-json": {
  "include": ["src/locales/[locale].json"],
  "lockedKeys": ["$vuetify", "dateTimeFormats", "numberFormats"]
}