カスタムメッセージフォーマット

対応バージョン

🆕 9.3+

メッセージフォーマット構文で説明した通り、Vue I18nのメッセージフォーマットはオリジナルです。

ICUメッセージフォーマットのようなメッセージフォーマットを使用したい場合は、独自のメッセージコンパイラを実装することでカスタムフォーマットを使用できます。

WARNING

このトピックでは、Vue I18n メッセージフォーマットのコンパイルおよびフォーマットの解釈方法について理解が必要です。

WARNING

この機能は実験的なものです。将来破壊的変更が加えられたり、削除される可能性があります。

メッセージコンパイラの実装

以下のインターフェースを持つ関数を実装することでメッセージコンパイラを作成できます。

以下のTypeScript型定義です：

export declare type MessageCompiler<Message = string, MessageSource = string | ResourceNode> = (message: MessageSource, context: MessageCompilerContext) => MessageFunction<Message>;

以下の例は、intl-messageformatを使用してICUメッセージフォーマットをサポートするメッセージコンパイラの実装例です。

import IntlMessageFormat from 'intl-messageformat'

import type { MessageCompiler, CompileError, MessageContext } from 'vue-i18n'

export const messageCompiler: MessageCompiler = (
  message,
  { locale, key, onError }
) => {
  if (typeof message === 'string') {
    /**
     * ここではキャッシュ戦略やメモ化を利用して、メッセージコンパイラのパフォーマンスをさらに調整できます
     */
    const formatter = new IntlMessageFormat(message, locale)
    return (ctx: MessageContext) => {
      return formatter.format(ctx.values)
    }
  } else {
    /**
     * AST用。
     * これをサポートしたい場合は、
     * `json`、`yaml`などのロケールメッセージをバンドルプラグインで変換する必要があります。
     */
    onError && onError(new Error('not support for AST') as CompileError)
    return () => key
  }
}

メッセージコンパイラの登録

メッセージコンパイラを実装したら、createI18nのmessageCompilerオプションを以下のように設定することで、messagesオプションに独自のメッセージフォーマットを使用できます：

import { createI18n } from 'vue-i18n'
import { messageCompiler } from './compilation'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messageCompiler,
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    }
  }
})

// 以下、あなたの処理...
// ...

参考

メッセージコンパイラを実装する際には、コンパイルコードを読んで理解することを推奨します。

INFO

以下のチュートリアルのコードは、examples/message-formatから入手できます。