Skip to content

vue-i18n / general / Composer

Interface: Composer<Messages, DateTimeFormats, NumberFormats, OptionLocale, ResourceLocales, Locales>

Vue I18n Composition

Composer interfaces

Remarks

This is the interface for being used for Vue 3 Composition API.

Extends

Type Parameters

Type ParameterDefault type
Messages extends Record<string, any>object
DateTimeFormats extends Record<string, any>object
NumberFormats extends Record<string, any>object
OptionLocaleLocale
ResourceLocales| PickupLocales<NonNullable<Messages>> | PickupLocales<NonNullable<DateTimeFormats>> | PickupLocales<NonNullable<NumberFormats>>
LocalesLocale extends GeneratedLocale ? GeneratedLocale : OptionLocale extends Locale ? IsNever<ResourceLocales> extends true ? Locale : ResourceLocales : OptionLocale | ResourceLocales

Methods

getDateTimeFormat()

ts
getDateTimeFormat<DateTimeSchema, LocaleSchema, Locale, Return>(locale): Return;

Get datetime format

Type Parameters

Type ParameterDefault typeDescription
DateTimeSchema extends Record<string, any>neverThe datetime format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<DateTimeFormats>>-
ReturnIsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{ [key: string]: DateTimeFormatOptions; }> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale

Returns

Return

Datetime format

Remarks

get datetime format from Composer instance Composer#datetimeFormats.


getLocaleMessage()

ts
getLocaleMessage<MessageSchema, LocaleSchema, Locale, Return>(locale): Return;

Get locale message

Type Parameters

Type ParameterDefault typeDescription
MessageSchema extends LocaleMessage<VueMessageType>neverThe locale message schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<Messages>>-
ReturnIsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{ [key: string]: LocaleMessageValue<VueMessageType>; }> : NonNullable<Messages>[Locale] : MessageSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale

Returns

Return

Locale messages

Remarks

get locale message from Composer instance Composer#messages.


getMissingHandler()

ts
getMissingHandler(): MissingHandler | null;

Get missing handler

See about:

  • Composer#missing

Returns

MissingHandler | null

MissingHandler


getNumberFormat()

ts
getNumberFormat<NumberSchema, LocaleSchema, Locale, Return>(locale): Return;

Get number format

Type Parameters

Type ParameterDefault typeDescription
NumberSchema extends Record<string, any>neverThe number format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<NumberFormats>>-
ReturnIsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{ [key: string]: NumberFormatOptions; }> : NonNullable<NumberFormats>[Locale] : NumberSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale

Returns

Return

Number format

Remarks

get number format from Composer instance Composer#numberFormats.


getPostTranslationHandler()

ts
getPostTranslationHandler(): 
  | PostTranslationHandler<VueMessageType>
  | null;

Get post translation handler

See about:

  • Composer#missing

Returns

| PostTranslationHandler<VueMessageType> | null

PostTranslationHandler


mergeDateTimeFormat()

ts
mergeDateTimeFormat<DateTimeSchema, LocaleSchema, Locale, Formats>(locale, format): void;

Merge datetime format

Type Parameters

Type ParameterDefault typeDescription
DateTimeSchema extends Record<string, any>neverThe datetime format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<DateTimeFormats>>-
FormatsIsNever<DateTimeSchema> extends true ? Record<string, any> : DateTimeSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
formatFormatsA target datetime format

Returns

void

Remarks

Merge datetime format to Composer instance Composer#datetimeFormats.


mergeLocaleMessage()

ts
mergeLocaleMessage<MessageSchema, LocaleSchema, Locale, Message>(locale, message): void;

Merge locale message

Type Parameters

Type ParameterDefault typeDescription
MessageSchema extends LocaleMessage<VueMessageType>neverThe locale message schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<Messages>>-
MessageIsNever<MessageSchema> extends true ? Record<string, any> : MessageSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
messageMessageA message

Returns

void

Remarks

Merge locale message to Composer instance Composer#messages.


mergeNumberFormat()

ts
mergeNumberFormat<NumberSchema, LocaleSchema, Locale, Formats>(locale, format): void;

Merge number format

Type Parameters

Type ParameterDefault typeDescription
NumberSchema extends Record<string, any>neverThe number format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<NumberFormats>>-
FormatsIsNever<NumberSchema> extends true ? Record<string, any> : NumberSchema-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
formatFormatsA target number format

Returns

void

Remarks

Merge number format to Composer instance Composer#numberFormats.


setDateTimeFormat()

ts
setDateTimeFormat<DateTimeSchema, LocaleSchema, Locale, FormatsType, Formats>(locale, format): void;

Set datetime format

Type Parameters

Type ParameterDefault typeDescription
DateTimeSchema extends Record<string, any>neverThe datetime format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<DateTimeFormats>>-
FormatsTypeIsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{ [key: string]: DateTimeFormatOptions; }> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema-
FormatsFormatsType-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
formatFormatsA target datetime format

Returns

void

Remarks

Set datetime format to Composer instance Composer#datetimeFormats.


setLocaleMessage()

ts
setLocaleMessage<MessageSchema, LocaleSchema, Locale, MessageType, Message>(locale, message): void;

Set locale message

Type Parameters

Type ParameterDefault typeDescription
MessageSchema extends LocaleMessage<VueMessageType>neverThe locale message schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<Messages>>-
MessageTypeIsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{ [key: string]: LocaleMessageValue<VueMessageType>; }> : NonNullable<Messages>[Locale] : MessageSchema-
MessageMessageType-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
messageMessageA message

Returns

void

Remarks

Set locale message to Composer instance Composer#messages.


setMissingHandler()

ts
setMissingHandler(handler): void;

Set missing handler

See about:

  • Composer#missing

Parameters

ParameterTypeDescription
handlerMissingHandler | nullA MissingHandler

Returns

void


setNumberFormat()

ts
setNumberFormat<NumberSchema, LocaleSchema, Locale, FormatsType, Formats>(locale, format): void;

Set number format

Type Parameters

Type ParameterDefault typeDescription
NumberSchema extends Record<string, any>neverThe number format schema, default never
LocaleSchema extends stringstring-
Locale extends stringPickupLocales<NonNullable<NumberFormats>>-
FormatsTypeIsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{ [key: string]: NumberFormatOptions; }> : NonNullable<NumberFormats>[Locale] : NumberSchema-
FormatsFormatsType-

Parameters

ParameterTypeDescription
localeLocaleSchema | LocaleA target locale
formatFormatsA target number format

Returns

void

Remarks

Set number format to Composer instance Composer#numberFormats.


setPostTranslationHandler()

ts
setPostTranslationHandler(handler): void;

Set post translation handler

See about:

  • Composer#missing

Parameters

ParameterTypeDescription
handler| PostTranslationHandler<VueMessageType> | nullA PostTranslationHandler

Returns

void


te()

ts
te<Str, Key>(key, locale?): boolean;

Translation locale message exist

Type Parameters

Type ParameterDefault type
Str extends string-
Key extends string | number | symbolPickupKeys<Messages>

Parameters

ParameterTypeDescription
keyStr | KeyA target locale message key
locale?LocalesA locale, it will be used over than global scope or local scope

Returns

boolean

If found locale message, true, else false, Note that false is returned even if the value present in the key is not translatable, yet if translateExistCompatible is set to true, it will return true if the key is available, even if the value is not translatable.

Remarks

whether do exist locale message on Composer instance Composer#messages.

If you specified locale, check the locale messages of locale.


tm()

ts
tm<Key, ResourceKeys, Locale, Target, Return>(key): Return;

Locale messages getter

Type Parameters

Type ParameterDefault type
Key extends string-
ResourceKeys extends string | number | symbolPickupKeys<Messages>
Locale extends stringPickupLocales<NonNullable<Messages>>
TargetIsEmptyObject<Messages> extends false ? NonNullable<Messages>[Locale] : RemoveIndexSignature<{ [key: string]: LocaleMessageValue<VueMessageType>; }>
ReturnResourceKeys extends ResourcePath<Target> ? ResourceValue<Target, ResourceKeys<ResourceKeys>> : Record<string, any>

Parameters

ParameterTypeDescription
keyKey | ResourceKeysA target locale message key

Returns

Return

Locale messages

Remarks

If I18nScope 'local' or Some UseI18nOptions are specified at useI18n, it’s translated in preferentially local scope locale messages than global scope locale messages.

Based on the current locale, locale messages will be returned from Composer instance messages.

If you change the locale, the locale messages returned will also correspond to the locale.

If there are no locale messages for the given key in the composer instance messages, they will be returned with fallbacking.

WARNING

You need to use rt for the locale message returned by tm. see the rt details.

Example

template block:

html
<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>

script block:

js
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 }
  }
})

Properties

availableLocales

ts
readonly availableLocales: ComputedRef<Locales[]>;

Remarks

The list of available locales in messages in lexical order.


d

ts
d: ComposerDateTimeFormatting<DateTimeFormats, Locales, RemoveIndexSignature<{
[key: string]: DateTimeFormatOptions;
}>>;

Datetime formatting

Remarks

About details functions, See the ComposerDateTimeFormatting


datetimeFormats

ts
readonly datetimeFormats: ComputedRef<{ [K in string | number | symbol]: DateTimeFormats[K] }>;

Remarks

The datetime formats of localization.

See about:


escapeParameter

ts
escapeParameter: boolean;

Remarks

Whether interpolation parameters are escaped before the message is translated.

See about:


fallbackFormat

ts
fallbackFormat: boolean;

Remarks

Whether suppress warnings when falling back to either fallbackLocale or root.

See about:


fallbackLocale

ts
fallbackLocale: WritableComputedRef<FallbackLocales<Locales>>;

Remarks

The current fallback locales this Composer instance is using.

See about:


fallbackRoot

ts
fallbackRoot: boolean;

Remarks

Whether to fall back to root level (global scope) localization when localization fails.

See about:


fallbackWarn

ts
fallbackWarn: boolean | RegExp;

Remarks

Whether suppress fall back warnings when localization fails.

See about:


id

ts
id: number;

Remarks

Instance ID.


inheritLocale

ts
inheritLocale: boolean;

Remarks

Whether inherit the root level locale to the component localization locale.

See about:


isGlobal

ts
readonly isGlobal: boolean;

Remarks

Whether this composer instance is global or not


locale

ts
locale: WritableComputedRef<Locales>;

Remarks

The current locale this Composer instance is using.

If the locale contains a territory and a dialect, this locale contains an implicit fallback.

See about:


messages

ts
readonly messages: ComputedRef<{ [K in string | number | symbol]: Messages[K] }>;

Remarks

The locale messages of localization.

See about:


missingWarn

ts
missingWarn: boolean | RegExp;

Remarks

Whether suppress warnings outputted when localization fails.

See about:


modifiers

ts
readonly modifiers: LinkedModifiers<VueMessageType>;

Remarks

Custom Modifiers for linked messages.

See about:


n

ts
n: ComposerNumberFormatting<NumberFormats, Locales, RemoveIndexSignature<{
[key: string]: NumberFormatOptions;
}>>;

Number Formatting

Remarks

About details functions, See the ComposerNumberFormatting


numberFormats

ts
readonly numberFormats: ComputedRef<{ [K in string | number | symbol]: NumberFormats[K] }>;

Remarks

The number formats of localization.

See about:


pluralRules

ts
readonly pluralRules: PluralizationRules;

Remarks

A set of rules for word pluralization

See about:


rt

ts
rt: ComposerResolveLocaleMessageTranslation<Locales>;

Resolve locale message translation

Remarks

About details functions, See the ComposerResolveLocaleMessageTranslation


t

ts
t: ComposerTranslation<Messages, Locales, RemoveIndexSignature<{
[key: string]: LocaleMessageValue<VueMessageType>;
}>>;

Locale message translation

Remarks

About details functions, See the ComposerTranslation


warnHtmlMessage

ts
warnHtmlMessage: boolean;

Remarks

Whether to allow the use locale messages of HTML formatting.

If you set false, will check the locale messages on the Composer instance.

If you are specified true, a warning will be output at console.

See about:

Released under the MIT License.