Lingo.dev + Vue.js単一ファイルコンポーネント

Lingo.dev CLIはVue I18n単一ファイルコンポーネントをサポートしており、.vueファイル内に翻訳を保持できます。

注意: Vue.jsアプリケーションがJSONロケールファイルを使用している場合は、フロントエンド用の.json形式を使用してください。

クイックセットアップ

プロジェクトルートにi18n.json設定ファイルを作成します。

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

この設定では、英語をソース言語として設定し、スペイン語、フランス語、ドイツ語をターゲットとし、src/componentsおよびsrc/viewsディレクトリ内の.vueファイルを処理します。

サポートされている言語を確認

利用可能なソース言語とターゲット言語を一覧表示します。

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

すべてを翻訳

次のコマンドを実行して、すべてのVueコンポーネントを翻訳します。

npx lingo.dev@latest run

CLIはコンポーネント内の<i18n>ブロックをスキャンし、新規または変更されたコンテンツを翻訳し、翻訳をその場で更新します。

Vueコンポーネントでの動作方法

Lingo.devはVueの標準的なi18n構造で直接動作します。

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

翻訳後、コンポーネントにはすべてのターゲット言語が含まれます。

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

高度な設定

ファイルの除外

特定のコンポーネントを翻訳から除外します。

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

ハイブリッド翻訳

コンポーネントベースとファイルベースの翻訳を組み合わせます。

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

このセットアップにより、コンポーネント固有の翻訳はコンポーネント内に保持され、グローバルな翻訳は別のJSONファイルに保存されます。

このアプローチを使用する理由

  • 翻訳を使用するコンポーネントと一緒に保持
  • 文字列を別ファイルに抽出する必要なし
  • AIがコンポーネントのコンテキストを理解し、より良い翻訳を実現
  • 変更された部分のみを翻訳
  • Vue I18nの推奨パターンに対応

Lingo.devは、Vueのコンポーネントベースアーキテクチャを維持しながら、AI駆動の翻訳を提供します。