Skip to content

vue-i18n / general / ComposerOptions

インターフェース: ComposerOptions<Schema, Locales, MessagesLocales, DateTimeFormatsLocales, NumberFormatsLocales, MessageSchema, DateTimeSchema, NumberSchema, _Messages, _DateTimeFormats, _NumberFormats>

コンポーザーのオプション

備考

これはコンポーザーを作成するためのオプションです。

Vue I18n コンポジション

型パラメータ

型パラメータデフォルト型
Schema extends objectobject
Locales extends | { datetimeFormats: unknown; messages: unknown; numberFormats: unknown; } | stringLocale
MessagesLocalesLocales extends object ? M : Locales extends string ? Locales : Locale
DateTimeFormatsLocalesLocales extends object ? D : Locales extends string ? Locales : Locale
NumberFormatsLocalesLocales extends object ? N : Locales extends string ? Locales : Locale
MessageSchemaSchema extends object ? M : DefaultLocaleMessageSchema
DateTimeSchemaSchema extends object ? D : DefaultDateTimeFormatSchema
NumberSchemaSchema extends object ? N : DefaultNumberFormatSchema
_Messages extends LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>
_DateTimeFormats extends IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>
_NumberFormats extends IntlNumberFormats<NumberSchema, NumberFormatsLocales>IntlNumberFormats<NumberSchema, NumberFormatsLocales>

プロパティ

datetimeFormats?

ts
optional datetimeFormats: { [K in string | number | symbol]: DateTimeSchema };

備考

ローカライズの日時形式です。

参照先:

デフォルト

{}


escapeParameter?

ts
optional escapeParameter: boolean;

備考

escapeParameter が true に設定されている場合、メッセージが翻訳される前に補間パラメータはエスケープされます。

これは翻訳出力が v-html で使用され、翻訳リソースに HTML マークアップが含まれる場合(例:ユーザーが提供した値の周囲)に便利です。

この使用パターンは、事前に計算されたテキスト文字列を UI コンポーネントに渡すときによく発生します。

エスケープ処理では、以下の記号をそれぞれの HTML 文字エンティティで置換します:<>"'

escapeParameter を true に設定することは既存機能を破壊しないはずですが、XSS 攻撃ベクトルに対する微細な保護を提供します。

参照先:

デフォルト

false


fallbackFormat?

ts
optional fallbackFormat: boolean;

備考

言語にキーの翻訳がない場合に、翻訳キー上でテンプレート補間を行うかどうかです。

true の場合、あなたの「基本」言語に対してテンプレートを書く必要はありません。キーがテンプレートになります。

参照先:

デフォルト

false


fallbackLocale?

ts
optional fallbackLocale: FallbackLocale;

備考

フォールバックローカライズのロCALEです。

より複雑なフォールバック定義については fallback を参照してください。

参照先:

デフォルト

ロCALE が指定されていない場合のデフォルト 'en-US' またはそのロCALE値


fallbackRoot?

ts
optional fallbackRoot: boolean;

備考

コンポーネントローカライズにおいて、ローカライズに失敗した場合にルートレベル(グローバルスコープ)ローカライズにフォールバックするかどうかです。

false の場合、ルートにはフォールバックしません。

参照先:

デフォルト

true


fallbackWarn?

ts
optional fallbackWarn: boolean | RegExp;

備考

fallbackLocale またはルートにフォールバックしたときに警告を抑制するかどうかです。

false の場合、フォールバック警告を抑制します。

正規表現を使用すると、翻訳キー(例:t)と一致するフォールバック警告を抑制できます。

参照先:

デフォルト

true


flatJson?

ts
optional flatJson: boolean;

備考

フラットJSONメッセージを使用できるかどうかを許可します。

デフォルト

false


inheritLocale?

ts
optional inheritLocale: boolean;

備考

ルートレベルのロCALEをコンポーネントローカライズロCALEに継承するかどうかです。

false の場合、ルートレベルのロCALEに関係なく、各コンポーネントロCALEでローカライズします。

参照先:

デフォルト

true


locale?

ts
optional locale: string;

備考

ローカライズのロCALEです。

ロCALEに地域と方言が含まれている場合、このロCALEには暗黙的なフォールバックが含まれます。

参照先:

デフォルト

'en-US'


messageCompiler?

ts
optional messageCompiler: MessageCompiler;

備考

カスタムメッセージ形式のコンパイラです。

指定しない場合は、vue-i18n のデフォルトメッセージコンパイラが使用されます。

メッセージ関数を返す独自のメッセージコンパイラを実装する必要があります。

intl-messageformat を使用したカスタムメッセージコンパイラの例です。

js
import { createI18n } from 'vue-i18n'
import IntlMessageFormat from 'intl-messageformat'

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

// I18n オプションで呼び出す
const i18n = createI18n({
  locale: 'ja',
  messageCompiler, // お使いのメッセージコンパイラを設定
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      // ICU メッセージ形式
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    },
  }
})

// 以下、何か行う...
// ...

TIP

🆕 v9.3+

WARNING

カスタムメッセージ形式は実験的な機能です。将来破壊的な変更を受けたり、削除される可能性があります。

参照先:

デフォルト

undefined


messageResolver?

ts
optional messageResolver: MessageResolver;

備考

メッセージを解決するメッセージリゾルバです。

指定しない場合、デフォルトで vue-i18n の内部メッセージリゾルバが使用されます。

以下の要件を満たすメッセージリゾルバを自分で実装する必要があります:

  • メッセージリゾルバの第1引数として渡されたロケールメッセージと、第2引数として渡されたパスを使用してメッセージを解決します。
  • メッセージが解決できなかった場合、null を返さなければなりません。
  • null が返された場合、メッセージリゾルバは fallbackLocale が有効になっている場合にフォールバックで再び呼び出されるので、メッセージも解決する必要があります。

メッセージリゾルバは以下の API から間接的に呼び出されます:

createI18n を使用してセットアップする方法の例です:

js
import { createI18n } from 'vue-i18n'

// あなたのメッセージリゾルバ
function messageResolver(obj, path) {
  // 単純なメッセージ解決!
  const msg = obj[path]
  return msg != null ? msg : null
}

// I18n オプションで呼び出す
const i18n = createI18n({
  locale: 'ja',
  messageResolver, // あなたのメッセージリゾルバを設定
  messages: {
    en: { ... },
    ja: { ... }
  }
})

// 以下、何か行う...
// ...

TIP

🆕 v9.2+

WARNING

メッセージリゾルバを使用する場合、Composer#flatJson 設定は無視されます。つまり、フラットJSONを自分で解決する必要があります。

参照先:

デフォルト

undefined


messages?

ts
optional messages: { [K in string | number | symbol]: MessageSchema };

備考

ローカライズのロケールメッセージです。

参照先:

デフォルト

{}


missing?

ts
optional missing: MissingHandler;

備考

ローカライズが見つからないときのハンドラーです。

このハンドラーは、ローカライズ対象ロCALE、ローカライズパスキー、Vueインスタンス、値とともに呼び出されます。

missing ハンドラーが割り当てられていると、ローカライズが見つからなかった場合に警告が出力されません。

デフォルト

null


missingWarn?

ts
optional missingWarn: boolean | RegExp;

備考

ローカライズに失敗したときに警告を出力するかどうかです。

false の場合、ローカライズ失敗警告を抑制します。

正規表現を使用すると、翻訳キー(例:t)と一致するローカライズ失敗警告を抑制できます。

参照先:

デフォルト

true


modifiers?

ts
optional modifiers: LinkedModifiers<VueMessageType>;

備考

リンクされたメッセージのカスタム修飾子です。

参照先:


numberFormats?

ts
optional numberFormats: { [K in string | number | symbol]: NumberSchema };

備考

ローカライズの数値形式です。

参照先:

デフォルト

{}


pluralRules?

ts
optional pluralRules: PluralizationRules;

備考

単語の複数形規則のセットです。

参照先:

デフォルト

{}


postTranslation?

ts
optional postTranslation: PostTranslationHandler<VueMessageType>;

備考

翻訳後の処理ハンドラーです。

このハンドラーは t が呼び出された後に呼び出されます。

このハンドラーは、スペースのトリミングなど翻訳テキストをフィルタリングしたい場合に便利です。

デフォルト

null


warnHtmlMessage?

ts
optional warnHtmlMessage: boolean;

備考

HTML形式のロケールメッセージの使用を許可するかどうかです。

warnHtmlMessage プロパティを参照してください。

参照先:

デフォルト

true