カスタムディレクティブ

注意

v-t ディレクティブはバージョン11で非推奨となり、バージョン12で削除されます。このセクションはバージョン10を使用しているユーザー向けです。

$t の使用に加えて、翻訳には v-t カスタムディレクティブも使用できます。

文字列構文

文字列構文を使って、ロケールメッセージのキーPATHを渡すことができます。

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'hi there!' },
    ja: { hello: 'こんにちは！' }
  }
})

const app = createApp({
  data: () => ({ path: 'hello' })
})
app.use(i18n)
app.mount('#app')

テンプレート:

<div id="string-syntax">
  <!-- 文字列リテラルを使用 -->
  <p v-t="'hello'"></p>
  <!-- データからキーPATHをバインド -->
  <p v-t="path"></p>
</div>

出力:

<div id="string-syntax">
  <p>hi there!</p>
  <p>hi there!</p>
</div>

オブジェクト構文

あるいは、オブジェクト構文を使用することもできます。

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hi: 'Hi, {name}!'
        bye: 'Goodbye!',
        apple: 'no apples | one apple | {count} apples'
      }
    },
    ja: {
      message: {
        hi: 'こんにちは、{name}！',
        bye: 'さようなら！',
        apple: 'リンゴはありません | 一つのりんご | {count} りんご'
      }
    }
  }
})

const app = createApp({
  data() {
    return {
      byePath: 'message.bye',
      appleCount: 7,
    }
  }
})
app.use(i18n)
app.mount('#object-syntax')

テンプレート:

<div id="object-syntax">
  <!-- 引数付きオブジェクトを使用 -->
  <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
  <!-- データからキーPATHをバインド -->
  <p v-t="{ path: byePath, locale: 'en' }"></p>
  <!-- 複数形 -->
  <p v-t="{ path: 'message.apple', plural: appleCount }"></p>
</div>

出力:

<div id="object-syntax">
  <p>こんにちは、kazupon！</p>
  <p>Goodbye!</p>
  <p>7 りんご</p>
</div>

スコープ

スコープセクションで説明したように、vue-i18n はグローバルスコープとローカルスコープの両方をサポートしています。

v-t の動作は使用されるスコープに依存します：

• ローカルスコープ: Legacy APIスタイルのi18nオプションを使用する場合、または useI18n で useScope: 'local' を設定した場合に適用されます。
• グローバルスコープ: その他のすべての場合に使用されます。

$t vs v-t

$t

$t は VueI18n インスタンスの関数であり、以下の利点と欠点を持っています：

利点:

• テンプレート内での柔軟な使用が可能で、中括弧構文 {} もサポートされます。
• Vueコンポーネント内の算出プロパティやメソッドをサポートします。

欠点:

• $t は再レンダリングごとに実行されるため、翻訳オーバーヘッドが発生する可能性があります。

v-t

v-t は独自の利点と欠点を持つカスタムディレクティブです：

利点:

• vue-i18n-extensions によって提供されるVueコンパイラモジュールによって翻訳が事前処理できるため、$t よりパフォーマンスが良いです。
• ランタイム翻訳オーバーヘッドを軽減することでパフォーマンス最適化を可能にします。

欠点:

• $t より柔軟性が低い；使用がより複雑です。
• 翻訳されたコンテンツを要素の textContent に直接挿入するため、インラインHTML構造内で使用したり、他の動的テンプレート式と組み合わせたりすることはできません。
• サーバーサイドレンダリング(SSR)を使用する場合は、@vue/compiler-ssr の compile 関数で directiveTransforms オプションを設定してカスタム変換を構成する必要があります。