Legacy API ​

DateTimeFormatResult ​

Signature:

export declare type DateTimeFormatResult = string;

LocaleMessageObject ​

Signature:

export declare type LocaleMessageObject<Message = string> = LocaleMessageDictionary<Message>;

NumberFormatResult ​

Signature:

export declare type NumberFormatResult = string;

TranslateResult ​

Signature:

export declare type TranslateResult = string;

VueI18n ​

VueI18n legacy interfaces

Signature:

export interface VueI18n<Messages = {}, DateTimeFormats = {}, NumberFormats = {}>

Details

This interface is compatible with interface of VueI18n class (offered with Vue I18n v8.x).

availableLocales ​

Signature:

readonly availableLocales: Locale[];

Details

The list of available locales in messages in lexical order.

datetimeFormats ​

Signature:

readonly datetimeFormats: DateTimeFormats;

Details

The datetime formats of localization.

See Also

• Datetime Formatting

escapeParameterHtml ​

Signature:

escapeParameterHtml: boolean;

Details

Whether interpolation parameters are escaped before the message is translated.

See Also

• HTML Message

fallbackLocale ​

Signature:

fallbackLocale: FallbackLocale;

Details

The current fallback locales this VueI18n instance is using.

See Also

• Fallbacking

formatFallbackMessages ​

Signature:

formatFallbackMessages: boolean;

Details

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

See Also

• Fallbacking

formatter ​

Signature:

formatter: Formatter;

Details

The formatter that implemented with Formatter interface.

getChoiceIndex ​

Get choice index

Signature:

getChoiceIndex: (choice: Choice, choicesLength: number) => number;

Details

Get pluralization index for current pluralizing number and a given amount of choices.

id ​

Signature:

id: number;

Details

Instance ID.

locale ​

Signature:

locale: Locale;

Details

The current locale this VueI18n instance is using.

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

See Also

• Scope and Locale Changing

messages ​

Signature:

readonly messages: Messages;

Details

The locale messages of localization.

See Also

• Getting Started

missing ​

Signature:

missing: MissingHandler | null;

Details

A handler for localization missing.

modifiers ​

Signature:

readonly modifiers: LinkedModifiers<VueMessageType>;

Details

Custom Modifiers for linked messages.

See Also

• Custom Modifiers

numberFormats ​

Signature:

readonly numberFormats: NumberFormats;

Details

The number formats of localization.

See Also

• Number Formatting

pluralizationRules ​

A set of rules for word pluralization

Signature:

pluralizationRules: PluralizationRules;

See Also

• Custom Pluralization

postTranslation ​

Signature:

postTranslation: PostTranslationHandler<VueMessageType> | null;

Details

A handler for post processing of translation.

preserveDirectiveContent ​

Signature:

preserveDirectiveContent: boolean;

Details

Whether v-t directive's element should preserve textContent after directive is unbinded.

See Also

• Custom Directive
• Remove preserveDirectiveContent option

silentFallbackWarn ​

Signature:

silentFallbackWarn: boolean | RegExp;

Details

Whether suppress fallback warnings when localization fails.

silentTranslationWarn ​

Signature:

silentTranslationWarn: boolean | RegExp;

Details

Whether suppress warnings outputted when localization fails.

See Also

• Fallbacking

sync ​

Signature:

sync: boolean;

Details

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

See Also

• Local Scope

warnHtmlInMessage ​

Signature:

warnHtmlInMessage: WarnHtmlInMessageLevel;

Details

Whether to allow the use locale messages of HTML formatting.

If you set warn or error, will check the locale messages on the VueI18n instance.

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

If you are specified error will occurred an Error.

See Also

• HTML Message
• Change warnHtmlInMessage option default value

d(value) ​

Datetime formatting

Signature:

d(value: number | Date): DateTimeFormatResult;

Details

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

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

If i18n component options isn't specified, it’s formatted with global scope datetime formats.

See Also

• Datetime formatting

Parameters ​

Returns ​

Formatted value

d(value, key) ​

Datetime formatting

Signature:

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

Details

Overloaded d. About details, see the d details.

Parameters ​

Returns ​

Formatted value

d(value, key, locale) ​

Datetime formatting

Signature:

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

Details

Overloaded d. About details, see the d details.

Parameters ​

Returns ​

Formatted value

d(value, args) ​

Datetime formatting

Signature:

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

Details

Overloaded d. About details, see the d details.

Parameters ​

Returns ​

Formatted value

getDateTimeFormat(locale) ​

Get datetime format

Signature:

getDateTimeFormat(locale: Locale): DateTimeFormat;

Details

get datetime format from VueI18n instance datetimeFormats.

Parameters ​

Returns ​

Datetime format

getLocaleMessage(locale) ​

Get locale message

Signature:

getLocaleMessage(locale: Locale): LocaleMessageDictionary<VueMessageType>;

Details

get locale message from VueI18n instance messages.

Parameters ​

Returns ​

Locale messages

getNumberFormat(locale) ​

Get number format

Signature:

getNumberFormat(locale: Locale): NumberFormat;

Details

get number format from VueI18n instance numberFormats.

Parameters ​

Returns ​

Number format

mergeDateTimeFormat(locale, format) ​

Merge datetime format

Signature:

mergeDateTimeFormat(locale: Locale, format: DateTimeFormat): void;

Details

Merge datetime format to VueI18n instance datetimeFormats.

Parameters ​

mergeLocaleMessage(locale, message) ​

Merge locale message

Signature:

mergeLocaleMessage(locale: Locale, message: LocaleMessageDictionary<VueMessageType>): void;

Details

Merge locale message to VueI18n instance messages.

Parameters ​

mergeNumberFormat(locale, format) ​

Merge number format

Signature:

mergeNumberFormat(locale: Locale, format: NumberFormat): void;

Details

Merge number format to VueI18n instance numberFormats.

Parameters ​

n(value) ​

Number formatting

Signature:

n(value: number): NumberFormatResult;

Details

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

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

If i18n component options isn't specified, it’s formatted with global scope number formats.

See Also

• Number formatting

Parameters ​

Returns ​

Formatted value

n(value, key) ​

Number formatting

Signature:

n(value: number, key: string): NumberFormatResult;

Details

Overloaded n. About details, see the n details.

Parameters ​

Returns ​

Formatted value

n(value, key, locale) ​

Number formatting

Signature:

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

Details

Overloaded n. About details, see the n details.

Parameters ​

Returns ​

Formatted value

n(value, args) ​

Number formatting

Signature:

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

Details

Overloaded n. About details, see the n details.

Parameters ​

Returns ​

Formatted value

rt(message) ​

Resolve locale message translation

Signature:

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

Details

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

See Also

• Scope and Locale Changing

Parameters ​

Returns ​

Translated message

rt(message, plural, options) ​

Resolve locale message translation for plurals

Signature:

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

Details

Overloaded rt. About details, see the rt details.

In this overloaded rt, return a pluralized translation message.

See Also

• Pluralization

Parameters ​

Returns ​

Translated message

rt(message, list, options) ​

Resolve locale message translation for list interpolations

Signature:

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

Details

Overloaded rt. About details, see the rt details.

In this overloaded rt, return a pluralized translation message.

See Also

• List interpolation

Parameters ​

Returns ​

Translated message

rt(message, named, options) ​

Resolve locale message translation for named interpolations

Signature:

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

Details

Overloaded rt. About details, see the rt details.

In this overloaded rt, for each placeholder x, the locale messages should contain a {x} token.

See Also

• Named interpolation

Parameters ​

Returns ​

Translated message

setDateTimeFormat(locale, format) ​

Set datetime format

Signature:

setDateTimeFormat(locale: Locale, format: DateTimeFormat): void;

Details

Set datetime format to VueI18n instance datetimeFormats.

Parameters ​

setLocaleMessage(locale, message) ​

Set locale message

Signature:

setLocaleMessage(locale: Locale, message: LocaleMessageDictionary<VueMessageType>): void;

Details

Set locale message to VueI18n instance messages.

Parameters ​

setNumberFormat(locale, format) ​

Set number format

Signature:

setNumberFormat(locale: Locale, format: NumberFormat): void;

Details

Set number format to VueI18n instance numberFormats.

Parameters ​

t(key) ​

Locale message translation.

Signature:

t(key: Path): TranslateResult;

Details

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

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

If i18n component options isn't specified, it’s translated with global scope locale messages.

See Also

• Scope and Locale Changing

Parameters ​

Returns ​

Translated message

t(key, locale) ​

Locale message translation.

Signature:

t(key: Path, locale: Locale): TranslateResult;

Details

Overloaded t. About details, see the t details.

Parameters ​

Returns ​

Translated message

t(key, locale, list) ​

Locale message translation.

Signature:

t(key: Path, locale: Locale, list: unknown[]): TranslateResult;

Details

Overloaded t. About details, see the t details.

See Also

• List interpolation

Parameters ​

Returns ​

Translated message

t(key, locale, named) ​

Locale message translation.

Signature:

t(key: Path, locale: Locale, named: object): TranslateResult;

Details

Overloaded t. About details, see the t details.

See Also

• Named interpolation

Parameters ​

Returns ​

Translated message

t(key, list) ​

Locale message translation.

Signature:

t(key: Path, list: unknown[]): TranslateResult;

Details

Overloaded t. About details, see the t details.

See Also

• List interpolation

Parameters ​

Returns ​

Translated message

t(key, named) ​

Locale message translation.

Signature:

t(key: Path, named: Record<string, unknown>): TranslateResult;

Details

Overloaded t. About details, see the t details.

See Also

• Named interpolation

Parameters ​

Returns ​

Translated message

tc(key) ​

Locale message pluralization

Signature:

tc(key: Path): TranslateResult;

Details

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

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

If i18n component options isn't specified, it’s pluraled with global scope locale messages.

The plural choice number is handled with default 1.

See Also

• Pluralization

Parameters ​

Returns ​

Pluraled message

tc(key, locale) ​

Locale message pluralization

Signature:

tc(key: Path, locale: Locale): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, list) ​

Locale message pluralization

Signature:

tc(key: Path, list: unknown[]): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, named) ​

Locale message pluralization

Signature:

tc(key: Path, named: Record<string, unknown>): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, choice) ​

Locale message pluralization

Signature:

tc(key: Path, choice: number): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, choice, locale) ​

Locale message pluralization

Signature:

tc(key: Path, choice: number, locale: Locale): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, choice, list) ​

Locale message pluralization

Signature:

tc(key: Path, choice: number, list: unknown[]): TranslateResult;

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

tc(key, choice, named) ​

Locale message pluralization

Signature:

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

Details

Overloaded tc. About details, see the tc details.

Parameters ​

Returns ​

Pluraled message

te(key, locale) ​

Translation locale message exist

Signature:

te(key: Path, locale?: Locale): boolean;

Details

whether do exist locale message on VueI18n instance messages.

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

Parameters ​

Returns ​

If found locale message, true, else false

tm(key) ​

Locale messages getter

Signature:

tm(key: Path): 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 ​

Locale messages |

Examples

template:

<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 { createI18n } from 'vue-i18n'

const i18n = createI18n({
  messages: {
    en: {
      contents: [
        {
          title: 'Title1',
          // ...
          paragraphs: [
            // ...
          ]
        }
      ]
    }
  }
  // ...
})

VueI18nOptions ​

VueI18n Options

Signature:

export interface VueI18nOptions

Details

This option is compatible with VueI18n class constructor options (offered with Vue I18n v8.x)

availableLocales ​

Signature:

availableLocales?: Locale[];

Details

The list of available locales in messages in lexical order.

Default Value

[]

componentInstanceCreatedListener ​

Signature:

componentInstanceCreatedListener?: ComponentInstanceCreatedListener;

Details

A handler for getting notified when component-local instance was created.

The handler gets called with new and old (root) VueI18n instances.

This handler is useful when extending the root VueI18n instance and wanting to also apply those extensions to component-local instance.

Default Value

null

datetimeFormats ​

Signature:

datetimeFormats?: DateTimeFormatsType;

Details

The datetime formats of localization.

Default Value

{}

See Also

• Datetime Formatting

escapeParameterHtml ​

Signature:

escapeParameterHtml?: boolean;

Details

If escapeParameterHtml is configured as true then interpolation parameters are escaped before the message is translated.

This is useful when translation output is used in v-html and the translation resource contains html markup (e.g. around a user provided value).

This usage pattern mostly occurs when passing precomputed text strings into UI components.

The escape process involves replacing the following symbols with their respective HTML character entities: <, >, ", '.

Setting escapeParameterHtml as true should not break existing functionality but provides a safeguard against a subtle type of XSS attack vectors.

Default Value

false

See Also

• HTML Message

fallbackLocale ​

Signature:

fallbackLocale?: FallbackLocale;

Details

The locale of fallback localization.

For more complex fallback definitions see fallback.

Default Value

The default 'en-US' for the locale if it's not specified, or it's locale value

See Also

• Fallbacking

fallbackRoot ​

Signature:

fallbackRoot?: boolean;

Details

In the component localization, whether to fall back to root level (global scope) localization when localization fails.

If false, it's not fallback to root.

Default Value

true

See Also

• Fallbacking

flatJson ​

Signature:

flatJson?: boolean;

Details

Allow use flat json messages or not

Default Value

false

formatFallbackMessages ​

Signature:

formatFallbackMessages?: boolean;

Details

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

Default Value

false

See Also

• Fallbacking

formatter ​

Signature:

formatter?: Formatter;

Details

The formatter that implemented with Formatter interface.

locale ​

Signature:

locale?: Locale;

Details

The locale of localization.

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

Default Value

'en-US'

See Also

• Scope and Locale Changing

messages ​

Signature:

messages?: LocaleMessages<VueMessageType>;

Details

The locale messages of localization.

Default Value

{}

See Also

• Getting Started

missing ​

Signature:

missing?: MissingHandler;

Details

A handler for localization missing.

The handler gets called with the localization target locale, localization path key, the Vue instance and values.

If missing handler is assigned, and occurred localization missing, it's not warned.

Default Value

null

modifiers ​

Signature:

modifiers?: LinkedModifiers<VueMessageType>;

Details

Custom Modifiers for linked messages.

See Also

• Custom Modifiers

numberFormats ​

Signature:

numberFormats?: NumberFormatsType;

Details

The number formats of localization.

Default Value

{}

See Also

• Number Formatting

pluralizationRules ​

Signature:

pluralizationRules?: PluralizationRules;

Details

A set of rules for word pluralization

Default Value

{}

See Also

• Custom Pluralization

postTranslation ​

Signature:

postTranslation?: PostTranslationHandler<VueMessageType>;

Details

A handler for post processing of translation. The handler gets after being called with the $t, t, $tc, and tc.

This handler is useful if you want to filter on translated text such as space trimming.

Default Value

null

preserveDirectiveContent ​

Signature:

preserveDirectiveContent?: boolean;

Details

Whether v-t directive's element should preserve textContent after directive is unbinded.

Default Value

false

See Also

• Custom Directive
• Remove preserveDirectiveContent option

sharedMessages ​

Signature:

sharedMessages?: LocaleMessages<VueMessageType>;

Details

The shared locale messages of localization for components. More detail see Component based localization.

Default Value

undefined

See Also

• Shared locale messages for components

silentFallbackWarn ​

Signature:

silentFallbackWarn?: boolean | RegExp;

Details

Whether do template interpolation on translation keys when your language lacks a translation for a key.

If true, skip writing templates for your "base" language; the keys are your templates.

Default Value

false

See Also

• Fallbacking

silentTranslationWarn ​

Signature:

silentTranslationWarn?: boolean | RegExp;

Details

Whether suppress warnings outputted when localization fails.

If true, suppress localization fail warnings.

If you use regular expression, you can suppress localization fail warnings that it match with translation key (e.g. t).

Default Value

false

See Also

• Fallbacking

sync ​

Signature:

sync?: boolean;

Details

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

If false, regardless of the root level locale, localize for each component locale.

Default Value

true

See Also

• Local Scope

warnHtmlInMessage ​

Signature:

warnHtmlInMessage?: WarnHtmlInMessageLevel;

Details

Whether to allow the use locale messages of HTML formatting.

See the warnHtmlInMessage property.

Default Value

'off'

See Also

• HTML Message
• Change warnHtmlInMessage option default value