Vue
i1n SDKまたはvue-i18nを使用したBridge Modeで、i1nをVue.jsと統合します。
セットアップ
Vue プロジェクトで __VAR_1__ i1n init を実行します。CLI は、vue-i18n が存在する場合にそれを自動検出し、locales/ ディレクトリにネストされた JSON 形式を構成します。
i1n SDKはスタンドアロンモードで使用するか、Bridge Mode経由でvue-i18nに接続できます。
スタンドアロンモード
i1nからinit、t、setLocaleをインポートします。翻訳リソースをロードし、コンポーネントまたはテンプレートでt()を直接使用します。
このアプローチはvue-i18nを完全に置き換えます。Vueプラグインまたはコンポーザブルを使用して、アプリケーション全体でリアクティブなロケール切り替えを提供します。
vue-i18n を使用したブリッジモード
プロジェクトでvue-i18nを使用している場合、1行で接続できます: registerI1n((key, params) => i18n.global.t(key, params))。i1nのt()関数は、厳密な型チェックを提供しながらvue-i18nに委譲します。
i1nはJSONファイル、AI翻訳、型生成を管理します。vue-i18nは引き続きランタイムロード、$t()テンプレートヘルパー、useI18n()コンポーザブルを処理します。移行コストゼロ。
デプロイメント
ビルドステップにi1n pullを追加します。ViteベースのVueプロジェクトとNuxtの両方で動作します。
i1n pullによって生成された翻訳ファイルは、vue-i18nのファイルベースのローディングと完全に互換性があります。
src/App.vue
<template>
<h1>{{ $t('welcome') }}</h1>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script> Bridge Mode — src/i18n.ts
import { registerI1n } from 'i1n'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ /* ... */ })
registerI1n((key, params) => i18n.global.t(key, params))