Function: useI18n()

Call Signature

export function useI18n<Options extends UseI18nOptions = UseI18nOptions>(options?: Options): Composer<
  NonNullable<Options['messages']>,
  NonNullable<Options['datetimeFormats']>,
  NonNullable<Options['numberFormats']>,
  Options['locale'] extends unknown ? string : Options['locale']
>

Type Parameters

Name
Options extends UseI18nOptions = UseI18nOptions

Parameters

Name	Type	Description
options	Options	optional

Returns

Composer<NonNullable<Options['messages']>, NonNullable<Options['datetimeFormats']>, NonNullable<Options['numberFormats']>, Options['locale'] extends unknown ? string : Options['locale']>

Call Signature

export 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']>
>

Use Composition API for Vue I18n

Type Parameters

Name	Description
Schema = DefaultLocaleMessageSchema	The i18n resources (messages, datetimeFormats, numberFormats) schema, default LocaleMessage
Locales = 'en-US'	The locales of i18n resource schema, default en-US
Options extends UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>> = UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>>	-

Parameters

Name	Type	Description
options	Options	An options, see UseI18nOptions (optional)

Returns

Composer<NonNullable<Options['messages']>, NonNullable<Options['datetimeFormats']>, NonNullable<Options['numberFormats']>, NonNullable<Options['locale']>> — instance

Examples

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>

Tags

• @VueI18nComposition
• @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.