Skip to content

Component Injections

ComponentCustomOptions

Component Custom Properties for Vue I18n

Signature:

typescript
export interface ComponentCustomOptions;

i18n

Vue I18n options for Component

Signature:

typescript
i18n?: VueI18nOptions;

See Also

ComponentCustomProperties

Component Custom Options for Vue I18n

Signature:

typescript
export interface ComponentCustomProperties;

Details

These properties are injected into every child component

$i18n

Exported Global Composer instance, or global VueI18n instance.

Signature:

typescript
$i18n: VueI18n | ExportedGlobalComposer;

Details

You can get the exported composer instance which are exported from global composer instance created with createI18n, or global VueI18n instance.

You can get the exported composer instance in Composition API mode, or the Vuei18n instance in Legacy API mode, which is the instance you can refer to with this property.

The locales, locale messages, and other resources managed by the instance referenced by this property are valid as global scope.

If the i18n component option is not specified, it’s the same as the VueI18n instance that can be referenced by the i18n instance global.

See Also

$t(key)

Locale message translation

Signature:

typescript
$t(key: Key): TranslateResult;

Details

If this is used in a reactive context, it will re-evaluate once the locale changes.

In Composition API mode, the $t is injected by app.config.globalProperties. The input / output is the same as for Composer, and it works on global scope. About that details, see Composer#t.

In Legacy API mode, the input / output is the same as for VueI18n instance. About details, see VueI18n#t.

See Also

Parameters

ParameterTypeDescription
keyKeyA target locale message key

Returns

Translation message

$t(key, locale)

NOTICE

This API signature is available in Legacy API mode only and is supported until v9.

Locale message translation

Signature:

typescript
$t(key: Key, locale: Locale): TranslateResult;

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
localeLocaleA locale, override locale that global scope or local scope

Returns

Translation message

$t(key, locale, list)

NOTICE

This API signature is available in Legacy API mode only and is supported until v9.

Locale message translation

Signature:

typescript
$t(key: Key, locale: Locale, list: unknown[]): TranslateResult;

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
localeLocaleA locale, override locale that global scope or local scope
listunknown[]A values of list interpolation

Returns

Translation message

$t(key, locale, named)

NOTICE

This API signature is available in Legacy API mode only and is supported until v9.

Locale message translation

Signature:

typescript
$t(key: Key, locale: Locale, named: object): TranslateResult;

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
localeLocaleA locale, override locale that global scope or local scope
namedobjectA values of named interpolation

Returns

Translation message

$t(key, plural)

Locale message translation

Signature:

typescript
$t(key: Key, plural: number): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
pluralnumberA choice number of plural

Returns

Translation message

$t(key, plural, options)

Locale message translation

Signature:

typescript
$t(key: Key, plural: number, options: TranslateOptions): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
pluralnumberA choice number of plural
optionsTranslateOptionsAn options, see the TranslateOptions

Returns

Translation message

$t(key, defaultMsg)

Locale message translation

Signature:

typescript
$t(key: Key, defaultMsg: string): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
defaultMsgstringA default message to return if no translation was found

Returns

Translation message

$t(key, defaultMsg, options)

Locale message translation

Signature:

typescript
$t(key: Key, defaultMsg: string, options: TranslateOptions): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
defaultMsgstringA default message to return if no translation was found
optionsTranslateOptionsAn options, see the TranslateOptions

Returns

Translation message

$t(key, list)

Locale message translation

Signature:

typescript
$t(key: Key, list: unknown[]): TranslateResult;

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
listunknown[]A values of list interpolation

Returns

Translation message

$t(key, list, plural)

Locale message translation

Signature:

typescript
$t(key: Key, list: unknown[], plural: number): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
listunknown[]A values of list interpolation
pluralnumberA choice number of plural

Returns

Translation message

$t(key, list, defaultMsg)

Locale message translation

Signature:

typescript
$t(key: Key, list: unknown[], defaultMsg: string): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
listunknown[]A values of list interpolation
defaultMsgstringA default message to return if no translation was found

Returns

Translation message

$t(key, list, options)

Locale message translation

Signature:

typescript
$t(key: Key, list: unknown[], options: TranslateOptions): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
listunknown[]A values of list interpolation
optionsTranslateOptionsAn options, see the TranslateOptions

Returns

Translation message

$t(key, named)

Locale message translation

Signature:

typescript
$t(key: Key, named: NamedValue): TranslateResult;

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
namedNamedValueA values of named interpolation

Returns

Translation message

$t(key, named, plural)

Locale message translation

Signature:

typescript
$t(key: Key, named: NamedValue, plural: number): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
namedNamedValueA values of named interpolation
pluralnumberA choice number of plural

Returns

Translation message

$t(key, named, defaultMsg)

Locale message translation

Signature:

typescript
$t(key: Key, named: NamedValue, defaultMsg: string): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
namedNamedValueA values of named interpolation
defaultMsgstringA default message to return if no translation was found

Returns

Translation message

$t(key, named, options)

Locale message translation

Signature:

typescript
$t(key: Key, named: NamedValue, options: TranslateOptions): TranslateResult;

NOTE

Supported for Composition API mode only until v9. v10 or later can also be used in Legacy API mode.

Details

Overloaded $t. About details, see the $t remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
namedNamedValueA values of named interpolation
optionsTranslateOptionsAn options, see the TranslateOptions

Returns

Translation message

$rt(message)

Resolve locale message translation

Signature:

typescript
$rt(message: MessageFunction<VueMessageType> | VueMessageType): string;

Details

If this is used in a reactive context, it will re-evaluate once the locale changes.

In Composition API mode, the $rt is injected by app.config.globalProperties. The input / output is the same as for Composer, and it works on global scope. About that details, see Composer#rt.

In Legacy API mode, the input / output is the same as for VueI18n instance. About details, see VueI18n#rt.

See Also

Parameters

ParameterTypeDescription
messageMessageFunction<VueMessageType> | VueMessageTypeA target locale message to be resolved. You will need to specify the locale message returned by $tm.

Returns

Translation message

$rt(message, plural, options)

Resolve locale message translation for plurals

Signature:

typescript
$rt(message: MessageFunction<VueMessageType> | VueMessageType, plural: number, options?: TranslationOptions): string;

Details

Overloaded $rt. About details, see the $rt remarks.

Parameters

ParameterTypeDescription
messageMessageFunction<VueMessageType> | VueMessageTypeA target locale message to be resolved. You will need to specify the locale message returned by $tm.
pluralnumberWhich plural string to get. 1 returns the first one.
optionsTranslateOptionsAdditional TranslateOptions

Returns

Translation message

$rt(message, list, options)

Resolve locale message translation for list interpolations

Signature:

typescript
$rt(message: MessageFunction<VueMessageType> | VueMessageType, list: unknown[], options?: TranslationOptions): string;

Details

Overloaded $rt. About details, see the $rt remarks.

Parameters

ParameterTypeDescription
messageMessageFunction<VueMessageType> | VueMessageTypeA target locale message to be resolved. You will need to specify the locale message returned by $tm.
listunknown[]A values of list interpolation.
optionsTranslateOptionsAdditional TranslateOptions

Returns

Translation message

$rt(message, named, options)

Resolve locale message translation for named interpolations

Signature:

typescript
$rt(message: MessageFunction<VueMessageType> | VueMessageType, named: NamedValue, options?: TranslationOptions): string;

Details

Overloaded $rt. About details, see the $rt remarks.

Parameters

ParameterTypeDescription
messageMessageFunction<VueMessageType> | VueMessageTypeA target locale message to be resolved. You will need to specify the locale message returned by $tm.
namedNamedValueA values of named interpolation.
optionsTranslateOptionsAdditional TranslateOptions

Returns

Translation message

$tc(key)

Locale message pluralization

Signature:

typescript
$tc(key: Key): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

If this is used in a reactive context, it will re-evaluate once the locale changes.

The input / output is the same as for VueI18n instance. About that details, see VueI18n#tc.

The value of plural is handled with default 1.

See Also

Parameters

ParameterTypeDescription
keyKeyA target locale message key

Returns

Translation message that is pluraled

$tc(key, locale)

Locale message pluralization

Signature:

typescript
$tc(key: Key, locale: Locale): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
localeLocaleA locale, override locale that global scope or local scope

Returns

Translation message that is pluraled

$tc(key, list)

Locale message pluralization

Signature:

typescript
$tc(key: Key, list: unknown[]): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
listunknown[]A values of list interpolation

Returns

Translation message that is pluraled

$tc(key, named)

Locale message pluralization

Signature:

typescript
$tc(key: Key, named: Record<string, unknown>): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
namedRecord<string, unknown>A values of named interpolation

Returns

Translation message that is pluraled

$tc(key, choice)

Locale message pluralization

Signature:

typescript
$tc(key: Key, choice: number): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
choicenumberWhich plural string to get. 1 returns the first one

Returns

Translation message that is pluraled

$tc(key, choice, locale)

Locale message pluralization

Signature:

typescript
$tc(key: Key, choice: number, locale: Locale): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
choicenumberWhich plural string to get. 1 returns the first one
localeLocaleA locale, override locale that global scope or local scope

Returns

Translation message that is pluraled

$tc(key, choice, list)

Locale message pluralization

Signature:

typescript
$tc(key: Key, choice: number, list: unknown[]): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
choicenumberWhich plural string to get. 1 returns the first one
listunknown[]A values of list interpolation

Returns

Translation message that is pluraled

$tc(key, choice, named)

Locale message pluralization

Signature:

typescript
$tc(key: Key, choice: number, named: Record<string, unknown>): TranslateResult;

NOTE

Supported for Legacy API mode only.

Details

Overloaded $tc. About details, see the $tc remarks.

Parameters

ParameterTypeDescription
keyKeyA target locale message key
choicenumberWhich plural string to get. 1 returns the first one
namedRecord<string, unknown>A values of named interpolation

Returns

Translation message that is pluraled

$te(key, locale)

Translation message exist

Signature:

typescript
$te(key: Key, locale?: Locale): boolean;

Details

About that details, see VueI18n#te

Parameters

ParameterTypeDescription
keyKeyA target locale message key
localeLocaleOptional, A locale, override locale that global scope or local scope

Returns

If found locale message, true, else false.

$tm(key)

Locale messages getter

Signature:

typescript
$tm(key: Key): LocaleMessageValue<VueMessageType> | {}

Details

If i18n component options is specified, it’s get in preferentially local scope locale messages than global scope locale messages.

If i18n component options isn’t specified, it’s get with 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.

Parameters

ParameterTypeDescription
keyKeyA target locale message key

Returns

Locale messages

NOTE

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

$d(value)

Datetime formatting

Signature:

typescript
$d(value: number | Date): DateTimeFormatResult | string;

Details

If this is used in a reactive context, it will re-evaluate once the locale changes.

In Composition API mode, the input / output is the same as for VueI18n instance. About details, see VueI18n#d.

In Composition API mode, the $d is injected by app.config.globalProperties. The input / output is the same as for Composer instance, and it works on global scope. About that details, see Composer#d.

See Also

Parameters

ParameterTypeDescription
valuenumber | DateA value, timestamp number or Date instance

Returns

Formatted value

$d(value, key)

Datetime formatting

Signature:

typescript
$d(value: number | Date, key: string): DateTimeFormatResult | string;

Details

Overloaded $d. About details, see the $d remarks.

Parameters

ParameterTypeDescription
valuenumber | DateA value, timestamp number or Date instance
keystringA key of datetime formats

Returns

Formatted value

$d(value, key, locale)

Datetime formatting

Signature:

typescript
$d(value: number | Date, key: string, locale: Locale): DateTimeFormatResult | string;

Details

Overloaded $d. About details, see the $d remarks.

Parameters

ParameterTypeDescription
valuenumber | DateA value, timestamp number or Date instance
keystringA key of datetime formats
localeLocaleA locale, override locale that global scope or local scope

Returns

Formatted value

$d(value, args)

Datetime formatting

Signature:

typescript
$d(value: number | Date, args: { [key: string]: string | boolean | number }): DateTimeFormatResult;

Details

Overloaded $d. About details, see the $d remarks.

Parameters

ParameterTypeDescription
valuenumber | DateA value, timestamp number or Date instance
args{ [key: string]: string }An argument values

Returns

Formatted value

$d(value, options)

Datetime formatting

Signature:

typescript
$d(value: number | Date, options: DateTimeOptions): string;

Details

Overloaded $d. About details, see the $d remarks.

Parameters

ParameterTypeDescription
valuenumber | DateA value, timestamp number or Date instance
optionsDateTimeOptionsAn options, see the DateTimeOptions

Returns

Formatted value

$n(value)

Number formatting

Signature:

typescript
$n(value: number): NumberFormatResult | string;

Details

If this is used in a reactive context, it will re-evaluate once the locale changes.

In Legacy API mode, the input / output is the same as for VueI18n instance. About details, see VueI18n#n.

In Composition API mode, the $n is injected by app.config.globalProperties. The input / output is the same as for Composer instance, and it works on global scope. About that details, see Composer#n.

See Also

Parameters

ParameterTypeDescription
valuenumberA number value

Returns

Formatted value

$n(value, key)

Number formatting

Signature:

typescript
$n(value: number, key: string): NumberFormatResult | string;

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
keystringA key of number formats

Returns

Formatted value

$n(value, key, locale)

Number formatting

Signature:

typescript
$n(value: number, key: string, locale: Locale): NumberFormatResult | string;

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
keystringA key of number formats
localeLocaleA locale, override locale that global scope or local scope

Returns

Formatted value

$n(value, args)

Number formatting

Signature:

typescript
$n(value: number, args: { [key: string]: string | boolean | number }): NumberFormatResult;

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
args{ [key: string]: string }An argument values

Returns

Formatted value

$n(value, key, args)

Number formatting

Signature:

typescript
$n(value: number, key: string, args: { [key: string]: string | boolean | number }): NumberFormatResult

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
keystringA key of number formats
args{ [key: string]: string }An argument values

Returns

Formatted value

$n(value, key, locale, args)

Number formatting

Signature:

typescript
$n(value: number, key: string, locale: Locale, args: { [key: string]: string | boolean | number }): NumberFormatResult

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
keystringA key of number formats
localeLocaleA locale, override locale that global scope or local scope
args{ [key: string]: string }An argument values

Returns

Formatted value

$n(value, options)

Number formatting

Signature:

typescript
$n(value: number, options: NumberOptions): string;

Details

Overloaded $n. About details, see the $n remarks.

Parameters

ParameterTypeDescription
valuenumberA number value
optionsNumberOptionsAn options, see the NumberOptions

Returns

Formatted value

Released under the MIT License.