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

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

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

クイックセットアップ

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

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

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

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

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

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

すべてを翻訳する

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

npx lingo.dev@latest i18n

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/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

ハイブリッド翻訳

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

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

この設定により、コンポーネント固有の翻訳はコンポーネント内に保持し、グローバルな翻訳は別のJSONファイルに保存します。

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

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

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