vue-i18n

vue-i18n

Version 9.14.1
Published 9 days ago
1.63 MB
3 dependencies
MIT license

Install

npm i vue-i18n

yarn add vue-i18n

pnpm add vue-i18n

Overview

Internationalization plugin for Vue.js

Index

Variables

variable DatetimeFormat

const DatetimeFormat: new () => {
    $props: VNodeProps & DatetimeFormatProps & BaseFormatProps;
};

Datetime Format Component
Remarks
See the following items for property about details
[FormattableProps](component#formattableprops) [BaseFormatProps](component#baseformatprops) [Custom Formatting](../guide/essentials/datetime#custom-formatting)
Not supported IE, due to no support Intl.DateTimeFormat#formatToParts in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts)
If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat)

variable I18nD

const I18nD: new () => {
    $props: VNodeProps & DatetimeFormatProps & BaseFormatProps;
};

variable I18nInjectionKey

const I18nInjectionKey: any;

Injection key for useI18n
Remarks
The global injection key for I18n instances with useI18n. this injection key is used in Web Components. Specify the i18n instance created by createI18n together with provide function.

variable I18nN

const I18nN: new () => { $props: VNodeProps & NumberFormatProps & BaseFormatProps };

variable I18nT

const I18nT: new () => { $props: VNodeProps & TranslationProps };

variable NumberFormat

const NumberFormat: new () => {
    $props: VNodeProps & NumberFormatProps & BaseFormatProps;
};

Number Format Component
Remarks
See the following items for property about details
[FormattableProps](component#formattableprops) [BaseFormatProps](component#baseformatprops) [Custom Formatting](../guide/essentials/number#custom-formatting)
Not supported IE, due to no support Intl.NumberFormat#formatToParts in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts)
If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat)

variable Translation

const Translation: new () => { $props: VNodeProps & TranslationProps };

Translation Component

Remarks

See the following items for property about details

[TranslationProps](component#translationprops) [BaseFormatProps](component#baseformatprops) [Component Interpolation](../guide/advanced/component)

Example 1

<div id="app">
  <!-- ... -->
  <i18n keypath="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->
</div>

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  },
  ja: {
    tos: '利用規約',
    term: '私は xxx の{0}に同意します。'
  }
}

const i18n = createI18n({
  locale: 'en',
  messages
})

const app = createApp({
  data: {
    url: '/term'
  }
}).use(i18n).mount('#app')

variable VERSION

const VERSION: string;

Vue I18n Version
Remarks
Semver format. Same format as the package.json version field.

Functions

function castToVueI18n

castToVueI18n: (
    i18n: I18n
) => VueI18n<
    {},
    {},
    {},
    string,
    never,
    string,
    Composer<{}, {}, {}, string, never, string>
> & { install: (Vue: any, options?: any) => void };

Cast to VueI18n legacy compatible type
Parameter i18n
An instance of I18n
Returns
A i18n instance which is casted to VueI18n type
:new: provided by **vue-i18n-bridge only**
Remarks
This API is provided only with [vue-i18n-bridge](https://vue-i18n.intlify.dev/guide/migration/ways.html#what-is-vue-i18n-bridge).
The purpose of this function is to convert an I18n instance created with createI18n(legacy: true) into a vue-i18n@v8.x compatible instance of new VueI18n in a TypeScript environment.

function createI18n

createI18n: {
    <
        Legacy extends boolean = true,
        Options extends I18nOptions<
            { message: any; datetime: any; number: any },
            Locale,
            | ComposerOptions<
                  { message: any; datetime: any; number: any },
                  Locale,
                  any,
                  any,
                  any,
                  any,
                  any,
                  any,
                  LocaleMessages<MessageSchema, MessagesLocales, any>,
                  IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                  IntlNumberFormats<NumberSchema, NumberFormatsLocales>
              >
            | VueI18nOptions<
                  { message: any; datetime: any; number: any },
                  Locale,
                  ComposerOptions<
                      { message: any; datetime: any; number: any },
                      Locale,
                      any,
                      any,
                      any,
                      any,
                      any,
                      any,
                      LocaleMessages<MessageSchema, MessagesLocales, any>,
                      IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                      IntlNumberFormats<NumberSchema, NumberFormatsLocales>
                  >
              >
        > = I18nOptions<
            { message: any; datetime: any; number: any },
            Locale,
            | ComposerOptions<
                  { message: any; datetime: any; number: any },
                  Locale,
                  any,
                  any,
                  any,
                  any,
                  any,
                  any,
                  LocaleMessages<MessageSchema, MessagesLocales, any>,
                  IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                  IntlNumberFormats<NumberSchema, NumberFormatsLocales>
              >
            | VueI18nOptions<
                  { message: any; datetime: any; number: any },
                  Locale,
                  ComposerOptions<
                      { message: any; datetime: any; number: any },
                      Locale,
                      any,
                      any,
                      any,
                      any,
                      any,
                      any,
                      LocaleMessages<MessageSchema, MessagesLocales, any>,
                      IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                      IntlNumberFormats<NumberSchema, NumberFormatsLocales>
                  >
              >
        >,
        Messages extends Record<
            string,
            unknown
        > = Options['messages'] extends Record<string, unknown>
            ? Options['messages']
            : {},
        DateTimeFormats extends Record<
            string,
            unknown
        > = Options['datetimeFormats'] extends Record<string, unknown>
            ? Options['datetimeFormats']
            : {},
        NumberFormats extends Record<
            string,
            unknown
        > = Options['numberFormats'] extends Record<string, unknown>
            ? Options['numberFormats']
            : {},
        OptionLocale = Options['locale'] extends string ? Options['locale'] : Locale
    >(
        options: Options,
        LegacyVueI18n?: any
    ): (typeof options)['legacy'] extends true
        ? I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, true>
        : (typeof options)['legacy'] extends false
        ? I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, false>
        : I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, Legacy>;
    <
        Schema extends object = any,
        Locales extends string | object = 'en-US',
        Legacy extends boolean = true,
        Options extends I18nOptions<
            SchemaParams<Schema, any>,
            LocaleParams<Locales>,
            | ComposerOptions<
                  SchemaParams<Schema, any>,
                  LocaleParams<Locales>,
                  any,
                  any,
                  any,
                  any,
                  any,
                  any,
                  LocaleMessages<MessageSchema, MessagesLocales, any>,
                  IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                  IntlNumberFormats<NumberSchema, NumberFormatsLocales>
              >
            | VueI18nOptions<
                  SchemaParams<Schema, any>,
                  LocaleParams<Locales>,
                  ComposerOptions<
                      SchemaParams<Schema, any>,
                      LocaleParams<Locales>,
                      any,
                      any,
                      any,
                      any,
                      any,
                      any,
                      LocaleMessages<MessageSchema, MessagesLocales, any>,
                      IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                      IntlNumberFormats<NumberSchema, NumberFormatsLocales>
                  >
              >
        > = I18nOptions<
            SchemaParams<Schema, any>,
            LocaleParams<Locales>,
            | ComposerOptions<
                  SchemaParams<Schema, any>,
                  LocaleParams<Locales>,
                  any,
                  any,
                  any,
                  any,
                  any,
                  any,
                  LocaleMessages<MessageSchema, MessagesLocales, any>,
                  IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                  IntlNumberFormats<NumberSchema, NumberFormatsLocales>
              >
            | VueI18nOptions<
                  SchemaParams<Schema, any>,
                  LocaleParams<Locales>,
                  ComposerOptions<
                      SchemaParams<Schema, any>,
                      LocaleParams<Locales>,
                      any,
                      any,
                      any,
                      any,
                      any,
                      any,
                      LocaleMessages<MessageSchema, MessagesLocales, any>,
                      IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                      IntlNumberFormats<NumberSchema, NumberFormatsLocales>
                  >
              >
        >,
        Messages extends Record<string, unknown> = NonNullable<
            Options['messages']
        > extends Record<string, unknown>
            ? NonNullable<Options['messages']>
            : {},
        DateTimeFormats extends Record<string, unknown> = NonNullable<
            Options['datetimeFormats']
        > extends Record<string, unknown>
            ? NonNullable<Options['datetimeFormats']>
            : {},
        NumberFormats extends Record<string, unknown> = NonNullable<
            Options['numberFormats']
        > extends Record<string, unknown>
            ? NonNullable<Options['numberFormats']>
            : {},
        OptionLocale = Options['locale'] extends string ? Options['locale'] : Locale
    >(
        options: Options,
        LegacyVueI18n?: any
    ): Options['legacy'] extends true
        ? I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, true>
        : Options['legacy'] extends false
        ? I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, false>
        : I18n<Messages, DateTimeFormats, NumberFormats, OptionLocale, Legacy>;
};

Vue I18n factory

Parameter options

An options, see the I18nOptions

Returns

I18n instance

Remarks

If you use Legacy API mode, you need to specify VueI18nOptions and legacy: true option.

If you use composition API mode, you need to specify ComposerOptions.

[Getting Started](../guide/essentials/started) [Composition API](../guide/advanced/composition)

Example 1

case: for Legacy API

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

// call with I18n option
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: { ... },
    ja: { ... }
  }
})

const App = {
  // ...
}

const app = createApp(App)

// install!
app.use(i18n)
app.mount('#app')

Example 2

case: for composition API

import { createApp } from 'vue'
import { createI18n, useI18n } from 'vue-i18n'

// call with I18n option
const i18n = createI18n({
  legacy: false, // you must specify 'legacy: false' option
  locale: 'ja',
  messages: {
    en: { ... },
    ja: { ... }
  }
})

const App = {
  setup() {
    // ...
    const { t } = useI18n({ ... })
    return { ... , t }
  }
}

const app = createApp(App)

// install!
app.use(i18n)
app.mount('#app')

function useI18n

useI18n: {
    <
        Options extends UseI18nOptions<
            { message: any; datetime: any; number: any },
            Locale,
            ComposerOptions<
                { message: any; datetime: any; number: any },
                Locale,
                any,
                any,
                any,
                any,
                any,
                any,
                LocaleMessages<MessageSchema, MessagesLocales, any>,
                IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                IntlNumberFormats<NumberSchema, NumberFormatsLocales>
            >
        > = UseI18nOptions<
            { message: any; datetime: any; number: any },
            Locale,
            ComposerOptions<
                { message: any; datetime: any; number: any },
                Locale,
                any,
                any,
                any,
                any,
                any,
                any,
                LocaleMessages<MessageSchema, MessagesLocales, any>,
                IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                IntlNumberFormats<NumberSchema, NumberFormatsLocales>
            >
        >
    >(
        options?: Options
    ): Composer<
        NonNullable<Options['messages']>,
        NonNullable<Options['datetimeFormats']>,
        NonNullable<Options['numberFormats']>,
        Options['locale'] extends unknown ? string : Options['locale']
    >;
    <
        Schema = any,
        Locales = 'en-US',
        Options extends UseI18nOptions<
            SchemaParams<Schema, any>,
            LocaleParams<Locales>,
            ComposerOptions<
                SchemaParams<Schema, any>,
                LocaleParams<Locales>,
                any,
                any,
                any,
                any,
                any,
                any,
                LocaleMessages<MessageSchema, MessagesLocales, any>,
                IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                IntlNumberFormats<NumberSchema, NumberFormatsLocales>
            >
        > = UseI18nOptions<
            SchemaParams<Schema, any>,
            LocaleParams<Locales>,
            ComposerOptions<
                SchemaParams<Schema, any>,
                LocaleParams<Locales>,
                any,
                any,
                any,
                any,
                any,
                any,
                LocaleMessages<MessageSchema, MessagesLocales, any>,
                IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>,
                IntlNumberFormats<NumberSchema, NumberFormatsLocales>
            >
        >
    >(
        options?: Options
    ): Composer<
        NonNullable<Options['messages']>,
        NonNullable<Options['datetimeFormats']>,
        NonNullable<Options['numberFormats']>,
        Options['locale'] extends unknown ? string : Options['locale'],
        any,
        (
            Options['locale'] extends unknown ? string : Options['locale']
        ) extends Locale
            ? any
            : any
    >;
};

Use Composition API for Vue I18n

Parameter options

An options, see UseI18nOptions

Returns

Composer instance

Remarks

This function is mainly used by setup.

If options are specified, Composer instance is created for each component and you can be localized on the component.

If options are not specified, you can be localized using the global Composer.

Example 1

case: Component resource base localization

<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: { ... }
     }
   })
   // Something to do ...

   return { ..., t, locale }
 }
}
</script>

function vTDirective

vTDirective: (i18n: I18n) => ObjectDirective<T>;

Interfaces

interface BaseFormatProps

interface BaseFormatProps {}

BaseFormat Props for Components that is offered Vue I18n
Remarks
The interface definitions of the underlying props of components such as Translation, DatetimeFormat, and NumberFormat.

property i18n

i18n?: Composer;

Remarks
A composer instance with an existing scope.
This option takes precedence over the scope option.

property locale

locale?: Locale;

Remarks
Specifies the locale to be used for the component.
If specified, the global scope or the locale of the parent scope of the target component will not be overridden and the specified locale will be used.

property scope

scope?: ComponentI18nScope;

Remarks
Specifies the scope to be used in the target component.
You can specify either global or parent.
If global is specified, global scope is used, else then parent is specified, the scope of the parent of the target component is used.
If the parent is a global scope, the global scope is used, if it's a local scope, the local scope is used.

property tag

tag?: string | object;

Remarks
Used to wrap the content that is distribute in the slot. If omitted, the slot content is treated as Fragments.
You can specify a string-based tag name, such as p, or the object for which the component is defined.

interface Composer

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 = OptionLocale extends Locale
        ? IsNever<ResourceLocales> extends true
            ? Locale
            : ResourceLocales
        : OptionLocale | ResourceLocales
> extends ComposerCustom {}

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

property availableLocales

readonly availableLocales: Locales[];

Remarks
The list of available locales in messages in lexical order.

property d

d: ComposerDateTimeFormatting<
    DateTimeFormats,
    Locales,
    RemoveIndexSignature<{
        [K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
    }>
>;

Datetime formatting
Remarks
About details functions, See the ComposerDateTimeFormatting

property datetimeFormats

readonly datetimeFormats: ComputedRef<{
    [K in keyof DateTimeFormats]: DateTimeFormats[K];
}>;

Remarks
The datetime formats of localization.
[Datetime Formatting](../guide/essentials/datetime)

property escapeParameter

escapeParameter: boolean;

Remarks
Whether interpolation parameters are escaped before the message is translated.
[HTML Message](../guide/essentials/syntax#html-message)

property fallbackFormat

fallbackFormat: boolean;

Remarks
Whether suppress warnings when falling back to either fallbackLocale or root.
[Fallbacking](../guide/essentials/fallback)

property fallbackLocale

fallbackLocale: WritableComputedRef<FallbackLocales<Locales>>;

Remarks
The current fallback locales this Composer instance is using.
[Fallbacking](../guide/essentials/fallback)

property fallbackRoot

fallbackRoot: boolean;

Remarks
Whether to fall back to root level (global scope) localization when localization fails.
[Fallbacking](../guide/essentials/fallback)

property fallbackWarn

fallbackWarn: boolean | RegExp;

Remarks
Whether suppress fall back warnings when localization fails.
[Fallbacking](../guide/essentials/fallback)

property id

id: number;

Remarks
Instance ID.

property inheritLocale

inheritLocale: boolean;

Remarks
Whether inherit the root level locale to the component localization locale.
[Local Scope](../guide/essentials/scope#local-scope-2)

property isGlobal

readonly isGlobal: boolean;

Remarks
Whether this composer instance is global or not

property locale

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.
[Scope and Locale Changing](../guide/essentials/scope)

property messages

readonly messages: ComputedRef<{
    [K in keyof Messages]: Messages[K];
}>;

Remarks
The locale messages of localization.
[Getting Started](../guide/essentials/started)

property missingWarn

missingWarn: boolean | RegExp;

Remarks
Whether suppress warnings outputted when localization fails.
[Fallbacking](../guide/essentials/fallback)

property modifiers

readonly modifiers: LinkedModifiers<VueMessageType>;

Remarks
Custom Modifiers for linked messages.
[Custom Modifiers](../guide/essentials/syntax#custom-modifiers)

property n

n: ComposerNumberFormatting<
    NumberFormats,
    Locales,
    RemoveIndexSignature<{
        [K in keyof DefineNumberFormat]: DefineNumberFormat[K];
    }>
>;

Number Formatting
Remarks
About details functions, See the ComposerNumberFormatting

property numberFormats

readonly numberFormats: ComputedRef<{
    [K in keyof NumberFormats]: NumberFormats[K];
}>;

Remarks
The number formats of localization.
[Number Formatting](../guide/essentials/number)

property pluralRules

readonly pluralRules: PluralizationRules;

Remarks
A set of rules for word pluralization
[Custom Pluralization](../guide/essentials/pluralization#custom-pluralization)

property rt

rt: ComposerResolveLocaleMessageTranslation<Locales>;

Resolve locale message translation
Remarks
About details functions, See the ComposerResolveLocaleMessageTranslation

property t

t: ComposerTranslation<
    Messages,
    Locales,
    RemoveIndexSignature<{
        [K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
    }>
>;

Locale message translation
Remarks
About details functions, See the ComposerTranslation

property warnHtmlMessage

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.
[HTML Message](../guide/essentials/syntax#html-message) [Change warnHtmlInMessage option default value](../guide/migration/breaking#change-warnhtmlinmessage-option-default-value)

method getDateTimeFormat

getDateTimeFormat: <
    DateTimeSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<
        NonNullable<DateTimeFormats>
    >,
    Return = any
>(
    locale: LocaleSchema | Locale
) => Return;

Get datetime format
Parameter locale
A target locale
Returns
Datetime format
Remarks
get datetime format from Composer instance [datetimeFormats](composition#datetimeformats).

method getLocaleMessage

getLocaleMessage: <
    MessageSchema extends LocaleMessage<any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<
        NonNullable<Messages>
    >,
    Return = any
>(
    locale: LocaleSchema | Locale
) => Return;

Get locale message
Parameter locale
A target locale
Returns
Locale messages
Remarks
get locale message from Composer instance [messages](composition#messages).

method getMissingHandler

getMissingHandler: () => MissingHandler | null;

Get missing handler
Returns
MissingHandler
[missing](composition#missing)

method getNumberFormat

getNumberFormat: <
    NumberSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<
        NonNullable<NumberFormats>
    >,
    Return = any
>(
    locale: LocaleSchema | Locale
) => Return;

Get number format
Parameter locale
A target locale
Returns
Number format
Remarks
get number format from Composer instance [numberFormats](composition#numberFormats).

method getPostTranslationHandler

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

Get post translation handler
Returns
PostTranslationHandler
[missing](composition#posttranslation)

method mergeDateTimeFormat

mergeDateTimeFormat: <
    DateTimeSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<
        NonNullable<DateTimeFormats>
    >,
    Formats = Record<string, any> | DateTimeSchema
>(
    locale: LocaleSchema | Locale,
    format: Formats
) => void;

Merge datetime format
Parameter locale
A target locale
Parameter format
A target datetime format
Remarks
Merge datetime format to Composer instance [datetimeFormats](composition#datetimeformats).

method mergeLocaleMessage

mergeLocaleMessage: <
    MessageSchema extends LocaleMessage<any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<
        NonNullable<Messages>
    >,
    Message = Record<string, any> | MessageSchema
>(
    locale: LocaleSchema | Locale,
    message: Message
) => void;

Merge locale message
Parameter locale
A target locale
Parameter message
A message
Remarks
Merge locale message to Composer instance [messages](composition#messages).

method mergeNumberFormat

mergeNumberFormat: <
    NumberSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<
        NonNullable<NumberFormats>
    >,
    Formats = Record<string, any> | NumberSchema
>(
    locale: LocaleSchema | Locale,
    format: Formats
) => void;

Merge number format
Parameter locale
A target locale
Parameter format
A target number format
Remarks
Merge number format to Composer instance [numberFormats](composition#numberFormats).

method setDateTimeFormat

setDateTimeFormat: <
    DateTimeSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<
        NonNullable<DateTimeFormats>
    >,
    FormatsType = any,
    Formats extends FormatsType = FormatsType
>(
    locale: LocaleSchema | Locale,
    format: Formats
) => void;

Set datetime format
Parameter locale
A target locale
Parameter format
A target datetime format
Remarks
Set datetime format to Composer instance [datetimeFormats](composition#datetimeformats).

method setLocaleMessage

setLocaleMessage: <
    MessageSchema extends LocaleMessage<any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<
        NonNullable<Messages>
    >,
    MessageType = any,
    Message extends MessageType = MessageType
>(
    locale: LocaleSchema | Locale,
    message: Message
) => void;

Set locale message
Parameter locale
A target locale
Parameter message
A message
Remarks
Set locale message to Composer instance [messages](composition#messages).

method setMissingHandler

setMissingHandler: (handler: MissingHandler | null) => void;

Set missing handler
Parameter handler
A MissingHandler
[missing](composition#missing)

method setNumberFormat

setNumberFormat: <
    NumberSchema extends Record<string, any> = never,
    LocaleSchema extends string = string,
    Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<
        NonNullable<NumberFormats>
    >,
    FormatsType = any,
    Formats extends FormatsType = FormatsType
>(
    locale: LocaleSchema | Locale,
    format: Formats
) => void;

Set number format
Parameter locale
A target locale
Parameter format
A target number format
Remarks
Set number format to Composer instance [numberFormats](composition#numberFormats).

method setPostTranslationHandler

setPostTranslationHandler: (
    handler: PostTranslationHandler<VueMessageType> | null
) => void;

Set post translation handler
Parameter handler
A PostTranslationHandler
[missing](composition#posttranslation)

method te

te: <
    Str extends string,
    Key extends PickupKeys<Messages> = PickupKeys<Messages>
>(
    key: Str | Key,
    locale?: Locales
) => boolean;

Translation locale message exist
Parameter key
A target locale message key
Parameter locale
A locale, it will be used over than global scope or local scope
Returns
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 [messages](composition#messages).
If you specified locale, check the locale messages of locale.

method tm

tm: <
    Key extends string,
    ResourceKeys extends PickupKeys<Messages> = PickupKeys<Messages>,
    Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<
        NonNullable<Messages>
    >,
    Target = any,
    Return = ResourceKeys extends ResourcePath<Target>
        ? ResourceValue<Target, ResourceKeys>
        : Record<string, any>
>(
    key: Key | ResourceKeys
) => Return;

Locale messages getter

Parameter key

A target locale message key

Locale messages

Remarks

If [UseI18nScope](general#usei18nscope) 'local' or Some [UseI18nOptions](composition#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](../guide/essentials/fallback).

You need to use rt for the locale message returned by tm. see the [rt](composition#rt-message) details.

Example 1

template block:

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

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

interface ComposerAdditionalOptions

interface ComposerAdditionalOptions {}

Composer additional options for useI18n
Remarks
ComposerAdditionalOptions is extend for ComposerOptions, so you can specify these options.
[useI18n](composition#usei18n)

property useScope

useScope?: I18nScope;

interface ComposerCustom

interface ComposerCustom {}

The type custom definition of Composer

Remarks

The interface that can extend Composer.

The type defined by 3rd party (e.g. nuxt/i18n)

Example 1

// vue-i18n.d.ts (`.d.ts` file at your app)

declare module 'vue-i18n' {
  interface ComposerCustom {
    localeCodes: string[]
  }
}

interface ComposerDateTimeFormatting

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
> {}

Datetime formatting functions
Remarks
This is the interface for Composer

vue-i18n

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DatetimeFormat

Remarks

variable I18nD

variable I18nInjectionKey

Remarks

variable I18nN

variable I18nT

variable NumberFormat

Remarks

variable Translation

Remarks

Example 1

variable VERSION

Remarks

Functions

function castToVueI18n

Parameter i18n

Returns

Remarks

function createI18n

Parameter options

Returns

Remarks

Example 1

Example 2

function useI18n

Parameter options

Returns

Remarks

Example 1

function vTDirective

Interfaces

interface BaseFormatProps

Remarks

property i18n

Remarks

property locale

Remarks

property scope

Remarks

property tag

Remarks

interface Composer

Remarks

property availableLocales

Remarks

property d

Remarks

property datetimeFormats

Remarks

property escapeParameter

Remarks

property fallbackFormat

Remarks

property fallbackLocale

Remarks

property fallbackRoot

Remarks

property fallbackWarn

Remarks

property id

Remarks

property inheritLocale

Remarks

property isGlobal

Remarks

property locale

Remarks

property messages

Remarks

property missingWarn