Composition API
Composer
Composer インターフェース
署名:
export interface Composer<Messages extends Record<string, any> = {}, DateTimeFormats extends Record<string, any> = {}, NumberFormats extends Record<string, any> = {}, OptionLocale = Locale, ResourceLocales = PickupLocales<NonNullable<Messages>> | PickupLocales<NonNullable<DateTimeFormats>> | PickupLocales<NonNullable<NumberFormats>>, Locales = Locale extends GeneratedLocale ? GeneratedLocale : OptionLocale extends Locale ? IsNever<ResourceLocales> extends true ? Locale : ResourceLocales : OptionLocale | ResourceLocales> extends ComposerCustom詳細
これは Vue 3 Composition API で使用されるインターフェースです。
availableLocales
署名:
readonly availableLocales: ComputedRef<Locales[]>;詳細
"messages" 内の利用可能なロケールの一覧（語彙順）。
d
日時フォーマット
署名:
d: ComposerDateTimeFormatting<DateTimeFormats, Locales, RemoveIndexSignature<{
[K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
}>>;詳細
詳細な関数について、ComposerDateTimeFormatting を参照してください。
datetimeFormats
署名:
readonly datetimeFormats: ComputedRef<{
[K in keyof DateTimeFormats]: DateTimeFormats[K];
}>;詳細
ローカリゼーションの日時フォーマット。
参照:
escapeParameter
署名:
escapeParameter: boolean;詳細
メッセージが翻訳される前に補間パラメータをエスケープするかどうか。
参照:
fallbackFormat
署名:
fallbackFormat: boolean;詳細
fallbackLocale またはルートにフォールバックする際の警告を抑制するかどうか。
参照:
fallbackLocale
署名:
fallbackLocale: WritableComputedRef<FallbackLocales<Locales>>;詳細
この Composer インスタンスが現在使用しているフォールバックロケール。
参照:
fallbackRoot
署名:
fallbackRoot: boolean;詳細
ローカリゼーションに失敗した場合にルートレベル（グローバル スコープ）のローカリゼーションにフォールバックするかどうか。
参照:
fallbackWarn
署名:
fallbackWarn: boolean | RegExp;詳細
ローカリゼーションに失敗した際にフォールバック警告を抑制するかどうか。
参照:
id
署名:
id: number;詳細
インスタンス ID。
inheritLocale
署名:
inheritLocale: boolean;詳細
ルートレベルのロケールをコンポーネントローカリゼーションロケールに継承するかどうか。
参照:
isGlobal
署名:
readonly isGlobal: boolean;詳細
このコンポーザーインスタンスがグローバルかどうか
locale
署名:
locale: WritableComputedRef<Locales>;詳細
この Composer インスタンスが使用している現在のロケール。
ロケールに地域と方言が含まれている場合、このロケールには暗黙的なフォールバックが含まれます。
参照:
messages
署名:
readonly messages: ComputedRef<{
[K in keyof Messages]: Messages[K];
}>;詳細
ローカリゼーションのロケールメッセージ。
参照:
missingWarn
署名:
missingWarn: boolean | RegExp;詳細
ローカリゼーションに失敗した際に出力される警告を抑制するかどうか。
参照:
modifiers
署名:
readonly modifiers: LinkedModifiers<VueMessageType>;詳細
リンクされたメッセージに対するカスタム修飾子。
参照:
n
数値フォーマット
署名:
n: ComposerNumberFormatting<NumberFormats, Locales, RemoveIndexSignature<{
[K in keyof DefineNumberFormat]: DefineNumberFormat[K];
}>>;詳細
詳細な関数について、ComposerNumberFormatting を参照してください。
numberFormats
署名:
readonly numberFormats: ComputedRef<{
[K in keyof NumberFormats]: NumberFormats[K];
}>;詳細
ローカリゼーションの数値フォーマット。
参照:
pluralRules
署名:
readonly pluralRules: PluralizationRules;詳細
単語の複数形規則セット
参照:
rt
ロケールメッセージ翻訳の解決
署名:
rt: ComposerResolveLocaleMessageTranslation<Locales>;詳細
詳細な関数について、ComposerResolveLocaleMessageTranslation を参照してください。
t
ロケールメッセージ翻訳
署名:
t: ComposerTranslation<Messages, Locales, RemoveIndexSignature<{
[K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
}>>;詳細
詳細な関数について、ComposerTranslation を参照してください。
warnHtmlMessage
署名:
warnHtmlMessage: boolean;詳細
HTML フォーマットのロケールメッセージの使用を許可するかどうか。
false を設定すると、Composer インスタンス上のロケールメッセージをチェックします。
true を指定すると、コンソールに警告が出力されます。
参照:
getDateTimeFormat(locale)
日時フォーマットを取得
署名:
getDateTimeFormat<DateTimeSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<NonNullable<DateTimeFormats>>, Return = IsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{
[K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
}> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema>(locale: LocaleSchema | Locale): Return;型パラメータ
| パラメータ | 説明 |
|---|---|
| DateTimeSchema | 日時フォーマットスキーマ、デフォルトは never |
詳細
Composer インスタンスから日時フォーマットを取得します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
戻り値
日時フォーマット
getLocaleMessage(locale)
ロケールメッセージを取得
署名:
getLocaleMessage<MessageSchema extends LocaleMessage<VueMessageType> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, Return = IsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{
[K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
}> : NonNullable<Messages>[Locale] : MessageSchema>(locale: LocaleSchema | Locale): Return;型パラメータ
| パラメータ | 説明 |
|---|---|
| MessageSchema | ロケールメッセージスキーマ、デフォルトは never |
詳細
Composer インスタンスからロケールメッセージを取得します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
戻り値
ロケールメッセージ
getMissingHandler()
不足ハンドラーを取得
署名:
getMissingHandler(): MissingHandler | null;パラメータ
| パラメータ | タイプ | 説明 |
|---|
戻り値
getNumberFormat(locale)
数値フォーマットを取得
署名:
getNumberFormat<NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<NonNullable<NumberFormats>>, Return = IsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{
[K in keyof DefineNumberFormat]: DefineNumberFormat[K];
}> : NonNullable<NumberFormats>[Locale] : NumberSchema>(locale: LocaleSchema | Locale): Return;型パラメータ
| パラメータ | 説明 |
|---|---|
| NumberSchema | 数値フォーマットスキーマ、デフォルトは never |
詳細
Composer インスタンスから数値フォーマットを取得します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
戻り値
数値フォーマット
getPostTranslationHandler()
翻訳後の処理ハンドラーを取得
署名:
getPostTranslationHandler(): PostTranslationHandler<VueMessageType> | null;パラメータ
| パラメータ | タイプ | 説明 |
|---|
戻り値
mergeDateTimeFormat(locale, format)
日時フォーマットをマージ
署名:
mergeDateTimeFormat<DateTimeSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<NonNullable<DateTimeFormats>>, Formats = IsNever<DateTimeSchema> extends true ? Record<string, any> : DateTimeSchema>(locale: LocaleSchema | Locale, format: Formats): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| DateTimeSchema | 日時フォーマットスキーマ、デフォルトは never |
詳細
日時フォーマットを Composer インスタンスにマージします。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| format | Formats | 対象の日時フォーマット |
mergeLocaleMessage(locale, message)
ロケールメッセージをマージ
署名:
mergeLocaleMessage<MessageSchema extends LocaleMessage<VueMessageType> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, Message = IsNever<MessageSchema> extends true ? Record<string, any> : MessageSchema>(locale: LocaleSchema | Locale, message: Message): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| MessageSchema | ロケールメッセージスキーマ、デフォルトは never |
詳細
ロケールメッセージを Composer インスタンスにマージします。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| message | Message | メッセージ |
mergeNumberFormat(locale, format)
数値フォーマットをマージ
署名:
mergeNumberFormat<NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<NonNullable<NumberFormats>>, Formats = IsNever<NumberSchema> extends true ? Record<string, any> : NumberSchema>(locale: LocaleSchema | Locale, format: Formats): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| NumberSchema | 数値フォーマットスキーマ、デフォルトは never |
詳細
数値フォーマットを Composer インスタンスにマージします。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| format | Formats | 対象の数値フォーマット |
setDateTimeFormat(locale, format)
日時フォーマットを設定
署名:
setDateTimeFormat<DateTimeSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<NonNullable<DateTimeFormats>>, FormatsType = IsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{
[K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
}> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| DateTimeSchema | 日時フォーマットスキーマ、デフォルトは never |
詳細
日時フォーマットを Composer インスタンスに設定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| format | Formats | 対象の日時フォーマット |
setLocaleMessage(locale, message)
ロケールメッセージを設定
署名:
setLocaleMessage<MessageSchema extends LocaleMessage<VueMessageType> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, MessageType = IsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{
[K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
}> : NonNullable<Messages>[Locale] : MessageSchema, Message extends MessageType = MessageType>(locale: LocaleSchema | Locale, message: Message): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| MessageSchema | ロケールメッセージスキーマ、デフォルトは never |
詳細
ロケールメッセージを Composer インスタンスに設定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| message | Message | メッセージ |
setMissingHandler(handler)
不足ハンドラーを設定
署名:
setMissingHandler(handler: MissingHandler | null): void;パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| handler | MissingHandler | null | MissingHandler |
setNumberFormat(locale, format)
数値フォーマットを設定
署名:
setNumberFormat<NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<NonNullable<NumberFormats>>, FormatsType = IsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{
[K in keyof DefineNumberFormat]: DefineNumberFormat[K];
}> : NonNullable<NumberFormats>[Locale] : NumberSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats): void;型パラメータ
| パラメータ | 説明 |
|---|---|
| NumberSchema | 数値フォーマットスキーマ、デフォルトは never |
詳細
数値フォーマットを Composer インスタンスに設定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| locale | LocaleSchema | Locale | 対象のロケール |
| format | Formats | 対象の数値フォーマット |
setPostTranslationHandler(handler)
翻訳後の処理ハンドラーを設定
署名:
setPostTranslationHandler(handler: PostTranslationHandler<VueMessageType> | null): void;パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| handler | PostTranslationHandler<VueMessageType> | null |
te(key, locale)
ロケールメッセージの存在確認
署名:
te<Str extends string, Key extends PickupKeys<Messages> = PickupKeys<Messages>>(key: Str | Key, locale?: Locales): boolean;詳細
Composer インスタンスにロケールメッセージが存在するか確認します。
locale を指定した場合、そのロケールのメッセージをチェックします。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Str | Key | 対象のロケールメッセージキー |
| locale | Locales | ロケール、グローバルスコープまたはローカルスコープより優先的に使用されます |
戻り値
ロケールメッセージが見つかった場合は true、さもなければ false。ただし、キーに値が存在しても翻訳不可であっても false が返されます。ただし、translateExistCompatible が true に設定されている場合、キーが利用可能であれば値が翻訳不可であっても true が返されます。
tm(key)
ロケールメッセージの取得
署名:
tm<Key extends string, ResourceKeys extends PickupKeys<Messages> = PickupKeys<Messages>, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, Target = IsEmptyObject<Messages> extends false ? NonNullable<Messages>[Locale] : RemoveIndexSignature<{
[K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
}>, Return = ResourceKeys extends ResourcePath<Target> ? ResourceValue<Target, ResourceKeys> : Record<string, any>>(key: Key | ResourceKeys): Return;詳細
useI18n で I18nScope 'local' またはいくつかの UseI18nOptions が指定されている場合、グローバルスコープのロケールメッセージよりもローカルスコープのロケールメッセージが優先的に翻訳されます。
現在の locale に基づいて、Composer インスタンスのメッセージからロケールメッセージが返されます。
locale を変更した場合、返されるロケールメッセージも対応するロケールになります。
Composer インスタンスのメッセージに指定された key のロケールメッセージがない場合、フォールバックを使用して返されます。
[!WARNING] tm によって返されるロケールメッセージには rt を使用する必要があります。rt の詳細を参照してください。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | 対象のロケールメッセージキー |
戻り値
ロケールメッセージ
例
テンプレートブロック:
<div class="container">
<template v-for="content in tm('contents')">
<h2>{{ rt(content.title) }}</h2>
<p v-for="paragraph in content.paragraphs">
{{ rt(paragraph) }}
</p>
</template>
</div>スクリプトブロック:
import { defineComponent } from 'vue
import { useI18n } from 'vue-i18n'
export default defineComponent({
setup() {
const { rt, tm } = useI18n({
messages: {
en: {
contents: [
{
title: 'Title1',
// ...
paragraphs: [
// ...
]
}
]
}
}
// ...
})
// ...
return { ... , rt, tm }
}
})ComposerAdditionalOptions
useI18n のための Composer 追加オプション
署名:
export interface ComposerAdditionalOptions詳細
ComposerAdditionalOptions は ComposerOptions を拡張するため、これらのオプションを指定できます。
useScope
ComposerCustom
Composer の型カスタム定義
署名:
export interface ComposerCustom詳細
Composer を拡張できるインターフェース。
サードパーティ（例：nuxt/i18n）によって定義された型
例
// vue-i18n.d.ts (アプリ内の `.d.ts` ファイル)
declare module 'vue-i18n' {
interface ComposerCustom {
localeCodes: string[]
}
}ComposerDateTimeFormatting
日時フォーマット関数
署名:
export interface ComposerDateTimeFormatting<DateTimeFormats extends Record<string, any> = {}, Locales = 'en-US', DefinedDateTimeFormat extends RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>, C = IsEmptyObject<DefinedDateTimeFormat> extends false ? PickupFormatPathKeys<{
[K in keyof DefinedDateTimeFormat]: DefinedDateTimeFormat[K];
}> : never, M = IsEmptyObject<DateTimeFormats> extends false ? PickupFormatKeys<DateTimeFormats> : never, ResourceKeys extends C | M = IsNever<C> extends false ? IsNever<M> extends false ? C | M : C : IsNever<M> extends false ? M : never>詳細
これは Composer のインターフェースです。
(value: number | Date | string): string;
日時フォーマット
署名:
(value: number | Date | string): string;詳細
この関数がリアクティブコンテキストで使用されている場合、ロケールが変更されると一度再評価されます。
useI18n で 'local' またはいくつかの UseI18nOptions が指定されている場合、グローバルスコープの日時フォーマットよりもローカルスコープの日時フォーマットが優先的に翻訳されます。
それ以外の場合は、グローバルスコープの日時フォーマットでフォーマットされます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | number | Date | string | 値、タイムスタンプ番号または Date インスタンスまたは ISO 8601 文字列 |
戻り値
フォーマットされた値
(value: Value, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;
日時フォーマット
署名:
<Value extends number | Date | string = number, Key extends string = string, OptionsType extends Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales>>(value: Value, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;詳細
オーバーロードされた d。
このオーバーロードされた d では、登録された日時フォーマットのキーで日時フォーマットを指定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | Value | 値、タイムスタンプ番号または Date インスタンスまたは ISO 8601 文字列 |
| keyOrOptions | OptionsType | 日時フォーマットのキー、または日時のフォーマット追加情報 |
戻り値
フォーマットされた値
(value: Value, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;
日時フォーマット
署名:
<Value extends number | Date | string = number, Key extends string = string, OptionsType extends Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales>>(value: Value, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;詳細
オーバーロードされた d。
このオーバーロードされた d では、対象ロケールの登録済み日時フォーマットのキーで日時フォーマットを指定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | Value | 値、タイムスタンプ番号または Date インスタンスまたは ISO 8601 文字列 |
| keyOrOptions | OptionsType | 日時フォーマットのキー、または日時のフォーマット追加情報 |
| locale | Locales | ロケール、グローバルスコープまたはローカルスコープより優先的に使用されます。 |
戻り値
フォーマットされた値
ComposerNumberFormatting
数値フォーマット関数
署名:
export interface ComposerNumberFormatting<NumberFormats extends Record<string, any> = {}, Locales = 'en-US', DefinedNumberFormat extends RemovedIndexResources<DefineNumberFormat> = RemovedIndexResources<DefineNumberFormat>, C = IsEmptyObject<DefinedNumberFormat> extends false ? PickupFormatPathKeys<{
[K in keyof DefinedNumberFormat]: DefinedNumberFormat[K];
}> : never, M = IsEmptyObject<NumberFormats> extends false ? PickupFormatKeys<NumberFormats> : never, ResourceKeys extends C | M = IsNever<C> extends false ? IsNever<M> extends false ? C | M : C : IsNever<M> extends false ? M : never>詳細
これは Composer のインターフェースです。
(value: number): string;
数値フォーマット
署名:
(value: number): string;詳細
この関数がリアクティブコンテキストで使用されている場合、ロケールが変更されると一度再評価されます。
useI18n で 'local' またはいくつかの UseI18nOptions が指定されている場合、グローバルスコープの数値フォーマットよりもローカルスコープの数値フォーマットが優先的に翻訳されます。
それ以外の場合は、グローバルスコープの数値フォーマットでフォーマットされます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | number | 数値 |
戻り値
フォーマットされた値
(value: number, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;
数値フォーマット
署名:
<Key extends string = string, OptionsType extends Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales>>(value: number, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;詳細
オーバーロードされた n。
このオーバーロードされた n では、登録された数値フォーマットのキーで数値フォーマットを指定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | number | 数値 |
| keyOrOptions | OptionsType | 数値フォーマットのキー、または数値のフォーマット追加情報 |
戻り値
フォーマットされた値
(value: number, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;
数値フォーマット
署名:
<Key extends string = string, OptionsType extends Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales>>(value: number, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;詳細
オーバーロードされた n。
このオーバーロードされた n では、対象ロケールの登録済み数値フォーマットのキーで数値フォーマットを指定します。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| value | number | 数値 |
| keyOrOptions | OptionsType | 数値フォーマットのキー、または数値のフォーマット追加情報 |
| locale | Locales | ロケール、グローバルスコープまたはローカルスコープより優先的に使用されます。 |
戻り値
フォーマットされた値
ComposerOptions
Composer オプション
署名:
export interface ComposerOptions<Schema extends {
message?: unknown;
datetime?: unknown;
number?: unknown;
} = {
message: DefaultLocaleMessageSchema;
datetime: DefaultDateTimeFormatSchema;
number: DefaultNumberFormatSchema;
}, Locales extends {
messages: unknown;
datetimeFormats: unknown;
numberFormats: unknown;
} | string = Locale, MessagesLocales = Locales extends {
messages: infer M;
} ? M : Locales extends string ? Locales : Locale, DateTimeFormatsLocales = Locales extends {
datetimeFormats: infer D;
} ? D : Locales extends string ? Locales : Locale, NumberFormatsLocales = Locales extends {
numberFormats: infer N;
} ? N : Locales extends string ? Locales : Locale, MessageSchema = Schema extends {
message: infer M;
} ? M : DefaultLocaleMessageSchema, DateTimeSchema = Schema extends {
datetime: infer D;
} ? D : DefaultDateTimeFormatSchema, NumberSchema = Schema extends {
number: infer N;
} ? N : DefaultNumberFormatSchema, _Messages extends LocaleMessages<MessageSchema, MessagesLocales, VueMessageType> = LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>, _DateTimeFormats extends DateTimeFormatsType<DateTimeSchema, DateTimeFormatsLocales> = DateTimeFormatsType<DateTimeSchema, DateTimeFormatsLocales>, _NumberFormats extends NumberFormatsType<NumberSchema, NumberFormatsLocales> = NumberFormatsType<NumberSchema, NumberFormatsLocales>>詳細
これはコンポーザーを作成するためのオプションです。
datetime
datetimeFormats
escapeParameter
署名:
escapeParameter?: boolean;詳細
escapeParameter が true に設定されている場合、メッセージが翻訳される前に補間パラメータがエスケープされます。
これは、翻訳出力が v-html で使用され、翻訳リソースに HTML マークアップが含まれている場合（例：ユーザー提供の値の周囲）に便利です。
このような使用パターンは、事前に計算されたテキスト文字列を UI コンポーネントに渡す場合によく起こります。
エスケープ処理では、以下の記号をそれぞれの HTML 文字エンティティに置き換えます：<、>、"、'。
escapeParameter を true に設定しても既存の機能は壊れませんが、XSS（クロスサイトスクリプティング）攻撃ベクトルに対する保護を提供します。
参照:
false
fallbackFormat
署名:
fallbackFormat?: boolean;詳細
言語に翻訳がない場合に翻訳キーでテンプレート補間を行うかどうか。
true の場合、"ベース"言語のテンプレートはスキップし、キーがテンプレートになります。
参照:
false
fallbackLocale
署名:
fallbackLocale?: FallbackLocale;詳細
フォールバックローカリゼーションのロケール。
より複雑なフォールバック定義についてはフォールバックを参照してください。
参照:
デフォルトは、locale が指定されていない場合または locale の値である 'en-US' です。
fallbackRoot
署名:
fallbackRoot?: boolean;詳細
コンポーネントローカリゼーションでは、ローカリゼーションに失敗した場合にルートレベル（グローバルスコープ）のローカリゼーションにフォールバックするかどうか。
false の場合、ルートへのフォールバックは行われません。
参照:
true
fallbackWarn
署名:
fallbackWarn?: boolean | RegExp;詳細
fallbackLocale またはルートへのフォールバック時に警告を抑制するかどうか。
false の場合、フォールバック警告は抑制されます。
正規表現を使用すると、翻訳キー（例：t）に一致するフォールバック警告を抑制できます。
参照:
true
flatJson
署名:
flatJson?: boolean;詳細
フラット JSON メッセージの使用を許可するかどうか
false
inheritLocale
署名:
inheritLocale?: boolean;詳細
ルートレベルのロケールをコンポーネントローカリゼーションロケールに継承するかどうか。
false の場合、ルートレベルのロケールに関係なく、各コンポーネントロケールでローカライズします。
参照:
true
locale
署名:
locale?: Locale;詳細
ローカリゼーションのロケール。
ロケールに地域と方言が含まれている場合、このロケールには暗黙的なフォールバックが含まれます。
参照:
'en-US'
message
messageCompiler
署名:
messageCompiler?: MessageCompiler;詳細
カスタムメッセージ形式のコンパイラ。
指定しない場合、vue-i18n のデフォルトメッセージコンパイラが使用されます。
メッセージ関数を返す独自のメッセージコンパイラを実装する必要があります。
例
intl-messageformat でカスタムメッセージコンパイラを設定する例:
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
署名:
messageResolver?: MessageResolver;詳細
メッセージを解決するためのメッセージリゾルバー。
指定しない場合、vue-i18n の内部メッセージリゾルバーがデフォルトで使用されます。
以下の要件を満たすメッセージリゾルバーを自分で実装する必要があります:
メッセージリゾルバーの第1引数として渡されたロケールメッセージと、第2引数として渡されたパスを使用してメッセージを解決します。
メッセージが解決できない場合は
nullを返します。nullが返される場合、フォールバックが有効な場合はメッセージリゾルバーも呼び出されるため、メッセージは解決される必要があります。
メッセージリゾルバーは以下の API によって間接的に呼び出されます:
例
createI18n で設定する方法の例:
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] メッセージリゾルバーを使用する場合、flatJson 設定は無視されます。つまり、フラット JSON を自分で解決する必要があります。
参照:
undefined
messages
missing
署名:
missing?: MissingHandler;詳細
ローカリゼーション不足のハンドラー。
ハンドラーはローカリゼーション対象ロケール、ローカリゼーションパスキー、Vue インスタンス、および値とともに呼び出されます。
不足ハンドラーが割り当てられており、ローカリゼーション不足が発生した場合、警告は表示されません。
null
missingWarn
署名:
missingWarn?: boolean | RegExp;詳細
ローカリゼーションに失敗した際に出力される警告を抑制するかどうか。
false の場合、ローカリゼーション失敗警告は抑制されます。
正規表現を使用すると、翻訳キー（例：t）に一致するローカリゼーション失敗警告を抑制できます。
参照:
true
modifiers
署名:
modifiers?: LinkedModifiers<VueMessageType>;詳細
リンクされたメッセージに対するカスタム修飾子。
参照:
number
numberFormats
pluralRules
署名:
pluralRules?: PluralizationRules;詳細
単語の複数形規則セット
参照:
{}
postTranslation
署名:
postTranslation?: PostTranslationHandler<VueMessageType>;詳細
翻訳後の処理のハンドラー。
このハンドラーは t の呼び出しが終わった後に呼び出されます。
このハンドラーは、スペースのトリミングなどの翻訳されたテキストをフィルターしたい場合に便利です。
null
warnHtmlMessage
署名:
warnHtmlMessage?: boolean;詳細
HTML フォーマットのロケールメッセージの使用を許可するかどうか。
warnHtmlMessage プロパティを参照してください。
参照:
true
ComposerResolveLocaleMessageTranslation
ロケールメッセージ翻訳の解決関数
署名:
export interface ComposerResolveLocaleMessageTranslation<Locales = 'en-US'>詳細
これは Composer のインターフェースです。
(message: MessageFunction<VueMessageType> | VueMessageType): string;
ロケールメッセージ翻訳の解決
署名:
(message: MessageFunction<VueMessageType> | VueMessageType): string;詳細
この関数がリアクティブコンテキストで使用されている場合、ロケールが変更されると一度再評価されます。
useI18n で 'local' またはいくつかの UseI18nOptions が指定されている場合、グローバルスコープのロケールメッセージよりもローカルスコープのロケールメッセージが優先的に翻訳されます。
それ以外の場合は、グローバルスコープのロケールメッセージで翻訳されます。
[!TIP] rt の使用例は、tm、v-for、JavaScript の for 文を使用したプログラムによるロケールメッセージ翻訳です。
[!WARNING] rt は t とは異なり、ロケールメッセージのキーではなく、ロケールメッセージ自体を処理します。rt には内部フォールバックはありません。tm によって返されるロケールメッセージの構造を理解し、使用する必要があります。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| message | MessageFunction<VueMessageType> | VueMessageType | 解決する対象のロケールメッセージ。tm によって返されるロケールメッセージを指定する必要があります。 |
戻り値
翻訳されたメッセージ
(message: MessageFunction<VueMessageType> | VueMessageType, plural: number, options?: TranslateOptions<Locales>): string;
複数形のロケールメッセージ翻訳の解決
署名:
(message: MessageFunction<VueMessageType> | VueMessageType, plural: number, options?: TranslateOptions<Locales>): string;詳細
オーバーロードされた rt。
このオーバーロードされた rt では、複数形の翻訳メッセージを返します。
[!TIP] rt の使用例は、tm、v-for、JavaScript の for 文を使用したプログラムによるロケールメッセージ翻訳です。
[!WARNING] rt は t とは異なり、ロケールメッセージのキーではなく、ロケールメッセージ自体を処理します。rt には内部フォールバックはありません。tm によって返されるロケールメッセージの構造を理解し、使用する必要があります。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| message | MessageFunction<VueMessageType> | VueMessageType | 解決する対象のロケールメッセージ。tm によって返されるロケールメッセージを指定する必要があります。 |
| plural | number | 複数形の文字列を取得する位置。1 は最初のものを返します。 |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
(message: MessageFunction<VueMessageType> | VueMessageType, list: unknown[], options?: TranslateOptions<Locales>): string;
リスト補間のロケールメッセージ翻訳の解決
署名:
(message: MessageFunction<VueMessageType> | VueMessageType, list: unknown[], options?: TranslateOptions<Locales>): string;詳細
オーバーロードされた rt。
このオーバーロードされた rt では、複数形の翻訳メッセージを返します。
[!TIP] rt の使用例は、tm、v-for、JavaScript の for 文を使用したプログラムによるロケールメッセージ翻訳です。
[!WARNING] rt は t とは異なり、ロケールメッセージのキーではなく、ロケールメッセージ自体を処理します。rt には内部フォールバックはありません。tm によって返されるロケールメッセージの構造を理解し、使用する必要があります。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| message | MessageFunction<VueMessageType> | VueMessageType | 解決する対象のロケールメッセージ。tm によって返されるロケールメッセージを指定する必要があります。 |
| list | unknown[] | リスト補間の値。 |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
(message: MessageFunction<VueMessageType> | VueMessageType, named: NamedValue, options?: TranslateOptions<Locales>): string;
名前付き補間のロケールメッセージ翻訳の解決
署名:
(message: MessageFunction<VueMessageType> | VueMessageType, named: NamedValue, options?: TranslateOptions<Locales>): string;詳細
オーバーロードされた rt。
このオーバーロードされた rt では、各プレースホルダー x に対してロケールメッセージに {x} トークンが含まれている必要があります。
[!TIP] rt の使用例は、tm、v-for、JavaScript の for 文を使用したプログラムによるロケールメッセージ翻訳です。
[!WARNING] rt は t とは異なり、ロケールメッセージのキーではなく、ロケールメッセージ自体を処理します。rt には内部フォールバックはありません。tm によって返されるロケールメッセージの構造を理解し、使用する必要があります。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| message | MessageFunction<VueMessageType> | VueMessageType | 解決する対象のロケールメッセージ。tm によって返されるロケールメッセージを指定する必要があります。 |
| named | NamedValue | 名前付き補間の値。 |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
ComposerTranslation
ロケールメッセージ翻訳関数
署名:
export interface ComposerTranslation<Messages extends Record<string, any> = {}, Locales = 'en-US', DefinedLocaleMessage extends RemovedIndexResources<DefineLocaleMessage> = RemovedIndexResources<DefineLocaleMessage>, C = IsEmptyObject<DefinedLocaleMessage> extends false ? JsonPaths<{
[K in keyof DefinedLocaleMessage]: DefinedLocaleMessage[K];
}> : never, M = IsEmptyObject<Messages> extends false ? TranslationsPaths<Messages> : never, ResourceKeys extends C | M = IsNever<C> extends false ? IsNever<M> extends false ? C | M : C : IsNever<M> extends false ? M : never>詳細
これは Composer のインターフェースです。
(key: Key | ResourceKeys | number): string;
ロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number): string;詳細
この関数がリアクティブコンテキストで使用されている場合、ロケールが変更されると一度再評価されます。
useI18n で I18nScope 'local' またはいくつかの UseI18nOptions が指定されている場合、グローバルスコープのロケールメッセージよりもローカルスコープのロケールメッセージが優先的に翻訳されます。
それ以外の場合は、グローバルスコープのロケールメッセージで翻訳されます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, named: NamedValue): string;
名前付き補間のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、各プレースホルダー x に対してロケールメッセージに {x} トークンが含まれている必要があります。
オプションに従って、翻訳不足の警告を抑止することもできます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| named | NamedValue | 名前付き補間の値 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, named: NamedValue, plural: number): string;
名前付き補間と複数形のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, plural: number): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、各プレースホルダー x に対してロケールメッセージに {x} トークンが含まれており、複数形の翻訳メッセージを返します。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| named | NamedValue | 名前付き補間の値 |
| plural | number | 複数形の文字列を取得する位置。1 は最初のものを返します。 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, named: NamedValue, defaultMsg: string): string;
名前付き補間と複数形のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, defaultMsg: string): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、各プレースホルダー x に対してロケールメッセージに {x} トークンが含まれており、翻訳が見つからない場合はデフォルトメッセージを返します。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| named | NamedValue | 名前付き補間の値 |
| defaultMsg | string | 翻訳が見つからない場合に返すデフォルトメッセージ |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, named: NamedValue, options: TranslateOptions<Locales>): string;
名前付き補間のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, options: TranslateOptions<Locales>): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、各プレースホルダー x に対してロケールメッセージに {x} トークンが含まれています。
オプションに従って、翻訳不足の警告を抑止することもできます。
オプションの詳細について、TranslateOptions を参照してください。
詳細な使用方法:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| named | NamedValue | 名前付き補間の値 |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, plural: number): string;
複数形のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, plural: number): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、複数形の翻訳メッセージを返します。
オプションに従って、翻訳不足の警告を抑止することもできます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| plural | number | 複数形の文字列を取得する位置。1 は最初のものを返します。 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, plural: number, options: TranslateOptions<Locales>): string;
複数形のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, plural: number, options: TranslateOptions<Locales>): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、複数形の翻訳メッセージを返します。
オプションに従って、翻訳不足の警告を抑止することもできます。
オプションの詳細について、TranslateOptions を参照してください。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| plural | number | 複数形の文字列を取得する位置。1 は最初のものを返します。 |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, defaultMsg: string): string;
不足デフォルトメッセージのロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, defaultMsg: string): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、翻訳が見つからない場合にデフォルトメッセージを返します。
オプションに従って、翻訳不足の警告を抑止することもできます。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| defaultMsg | string | 翻訳が見つからない場合に返すデフォルトメッセージ |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, defaultMsg: string, options: TranslateOptions<Locales>): string;
不足デフォルトメッセージのロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, defaultMsg: string, options: TranslateOptions<Locales>): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、翻訳が見つからない場合にデフォルトメッセージを返します。
オプションに従って、翻訳不足の警告を抑止することもできます。
オプションの詳細について、TranslateOptions を参照してください。
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| defaultMsg | string | 翻訳が見つからない場合に返すデフォルトメッセージ |
| options | TranslateOptions<Locales> | 翻訳の追加情報 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, list: unknown[]): string;
リスト補間のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[]): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、リスト内の各プレースホルダーに {0}、{1}、... が含まれるロケールメッセージが必要です。
オプションに従って、翻訳不足の警告を抑止することもできます。
参照:
パラメータ
| パラメータ | タイプ | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 対象のロケールメッセージキー |
| list | unknown[] | リスト補間の値 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, list: unknown[], plural: number): string;
リスト補間と複数形のロケールメッセージ翻訳
署名:
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], plural: number): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、リスト内の各プレースホルダーに {0}、{1}、... が含まれるロケールメッセージが必要であり、複数形の翻訳メッセージを返します。
参照:
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 翻訳対象のロケールメッセージキー |
| list | unknown[] | リスト補間における値 |
| plural | number | 取得する複数形の文字列。1 は最初のものを返します。 |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, list: unknown[], defaultMsg: string): string;
リスト補間と不足時のデフォルトメッセージを持つロケールメッセージの翻訳
シグネチャ:
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], defaultMsg: string): string;詳細
オーバーロードされた t。
詳しくは以下のリンクをご参照ください：
このオーバーロードされた t では、ロケールメッセージに {0}、{1} などのプレースホルダーが含まれている必要があります。もし翻訳が見つからない場合は、デフォルトメッセージを返します。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 翻訳対象のロケールメッセージキー |
| list | unknown[] | リスト補間における値 |
| defaultMsg | string | 翻訳が見つからなかった場合に返すデフォルトメッセージ |
戻り値
翻訳されたメッセージ
(key: Key | ResourceKeys | number, list: unknown[], options: TranslateOptions<Locales>): string;
リスト補間用のロケールメッセージの翻訳
シグネチャ:
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], options: TranslateOptions<Locales>): string;詳細
オーバーロードされた t。
このオーバーロードされた t では、ロケールメッセージに {0}、{1} などのプレースホルダーが含まれている必要があります。
また、翻訳が見つからない場合に警告を抑制することも可能です（オプションによる）。
オプションの詳細については、TranslateOptions をご参照ください。
使用方法については、以下をご確認ください：
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
| key | Key | ResourceKeys | number | 翻訳対象のロケールメッセージキー |
| list | unknown[] | リスト補間における値 |
| options | TranslateOptions<Locales> | 翻訳に関する追加オプション |
戻り値
翻訳されたメッセージ
MissingHandler
シグネチャ:
export type MissingHandler = (locale: Locale, key: Path, instance?: ComponentInternalInstance | GenericComponentInstance, type?: string) => string | void;useI18n
Vue I18n の Composition API を使用する
シグネチャ:
export declare function useI18n<Schema = DefaultLocaleMessageSchema, Locales = 'en-US', Options extends UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>> = UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>>>(options?: Options): Composer<NonNullable<Options['messages']>, NonNullable<Options['datetimeFormats']>, NonNullable<Options['numberFormats']>, NonNullable<Options['locale']>>;型パラメータ
| パラメータ | 説明 |
|---|---|
| Schema | 国際化リソース（メッセージ、日付形式、数値形式）スキーマ。デフォルトは DefaultLocaleMessageSchema |
| Locales | 国際化リソーススキーマのロケール。デフォルトは 'en-US' |
詳細
この関数は主に setup で使用されます。
オプションが指定されている場合、各コンポーネントに対して Composer インスタンスが作成され、コンポーネント単位でのローカライズが可能です。
オプションが指定されていない場合、グローバルな Composer を使用してローカライズできます。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
| options | Options | オプション。UseI18nOptions を参照 |
戻り値
Composer インスタンス
例
コンポーネントベースのリソースを使用したローカライズの場合:
<template>
<form>
<label>{{ t('language') }}</label>
<select v-model="locale">
<option value="en">en</option>
<option value="ja">ja</option>
</select>
</form>
<p>message: {{ t('hello') }}</p>
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t, locale } = useI18n({
locale: 'ja',
messages: {
en: { ... },
ja: { ... }
}
})
// 何かの処理 ...
return { ..., t, locale }
}
}
</script>UseI18nOptions
useI18n 用の国際化オプション
シグネチャ:
export type UseI18nOptions<Schema extends {
message?: unknown;
datetime?: unknown;
number?: unknown;
} = {
message: DefaultLocaleMessageSchema;
datetime: DefaultDateTimeFormatSchema;
number: DefaultNumberFormatSchema;
}, Locales extends {
messages: unknown;
datetimeFormats: unknown;
numberFormats: unknown;
} | string = Locale, Options extends ComposerOptions<Schema, Locales> = ComposerOptions<Schema, Locales>> = ComposerAdditionalOptions & Options;詳細
UseI18nOptions は ComposerAdditionalOptions および ComposerOptions を継承しているため、これらのオプションを指定できます。
VueMessageType
シグネチャ:
export type VueMessageType = string | ResourceNode | VNode;