vue-i18n / general / useI18n

Función: useI18n()

Firma de Llamada

function useI18n<Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, Options["locale"] extends unknown ? string : Options["locale"]>;

Parámetros de Tipo

Parámetro de Tipo

Tipo por defecto

Options extends UseI18nOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, ComposerOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, string, string, string, LocaleMessage<VueMessageType>, IntlDateTimeFormat, IntlNumberFormat, LocaleMessages<LocaleMessage<VueMessageType>, string, VueMessageType>, IntlDateTimeFormats<IntlDateTimeFormat, string>, IntlNumberFormats<IntlNumberFormat, string>>>

UseI18nOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, ComposerOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, string, string, string, LocaleMessage<VueMessageType>, IntlDateTimeFormat, IntlNumberFormat, LocaleMessages<LocaleMessage<VueMessageType>, string, VueMessageType>, IntlDateTimeFormats<IntlDateTimeFormat, string>, IntlNumberFormats<IntlNumberFormat, string>>>

Parámetros

Parámetro	Tipo
options?	Options

Retorna

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

Firma de Llamada

function useI18n<Schema, Locales, Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>;

Usar la API de Composición para Vue I18n

Parámetros de Tipo

Parámetro de Tipo	Tipo por defecto	Descripción
Schema	LocaleMessage<VueMessageType>	El esquema de los recursos i18n (mensajes, datetimeFormats, numberFormats), por defecto LocaleMessage
Locales	"en-US"	Los idiomas del esquema de recursos i18n, por defecto en-US
Options extends UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>>>	UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>>>	-

Parámetros

Parámetro	Tipo	Descripción
options?	Options	Una opción, ver UseI18nOptions

Retorna

Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>

Instancia de Composer

Comentarios

Esta función es principalmente usada por setup.

Si se especifican opciones, se crea una instancia de Composer para cada componente y puedes hacer la localización en el componente.

Si no se especifican opciones, puedes hacer la localización usando el Composer global.

Ejemplo

caso: Localización basada en recursos de componente

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>mensaje: {{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
 setup() {
   const { t, locale } = useI18n({
     locale: 'ja',
     messages: {
       en: { ... },
       ja: { ... }
     }
   })
   // Algo que hacer ...

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

Composición de Vue I18n