Skip to content

Composition API

Composer

Interfaces de Composer

Firma:

typescript
export 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 = Locale extends GeneratedLocale ? GeneratedLocale : OptionLocale extends Locale ? IsNever<ResourceLocales> extends true ? Locale : ResourceLocales : OptionLocale | ResourceLocales> extends ComposerCustom

Detalles

Esta es la interfaz para ser utilizada con la Vue 3 Composition API.

availableLocales

Firma:

typescript
readonly availableLocales: ComputedRef<Locales[]>;

Detalles

La lista de locales disponibles en messages en orden léxico.

d

Formato de fecha y hora

Firma:

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

Detalles

Para más detalles sobre las funciones, consulta ComposerDateTimeFormatting

datetimeFormats

Firma:

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

Detalles

Los formatos de fecha y hora de localización.

Ver:

escapeParameter

Firma:

typescript
escapeParameter: boolean;

Detalles

Si los parámetros de interpolación son escapados antes de que se traduzca el mensaje.

Ver:

fallbackFormat

Firma:

typescript
fallbackFormat: boolean;

Detalles

Si suprimir advertencias al volver a usar fallbackLocale o raíz.

Ver:

fallbackLocale

Firma:

typescript
fallbackLocale: WritableComputedRef<FallbackLocales<Locales>>;

Detalles

Los locales de fallback actuales que esta instancia de Composer está utilizando.

Ver:

fallbackRoot

Firma:

typescript
fallbackRoot: boolean;

Detalles

Si se realiza un fallback al nivel raíz (ámbito global) de localización cuando falla la localización.

Ver:

fallbackWarn

Firma:

typescript
fallbackWarn: boolean | RegExp;

Detalles

Si suprimir advertencias de fallback cuando falla la localización.

Ver:

id

Firma:

typescript
id: number;

Detalles

ID de instancia.

inheritLocale

Firma:

typescript
inheritLocale: boolean;

Detalles

Si hereda el locale de nivel raíz al locale de localización del componente.

Ver:

isGlobal

Firma:

typescript
readonly isGlobal: boolean;

Detalles

Si esta instancia del compositor es global o no

locale

Firma:

typescript
locale: WritableComputedRef<Locales>;

Detalles

El locale actual que esta instancia de Composer está utilizando.

Si el locale contiene un territorio y un dialecto, este locale contiene un fallback implícito.

Ver:

messages

Firma:

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

Detalles

Los mensajes de localización.

Ver:

missingWarn

Firma:

typescript
missingWarn: boolean | RegExp;

Detalles

Si suprimir advertencias generadas cuando falla la localización.

Ver:

modifiers

Firma:

typescript
readonly modifiers: LinkedModifiers<VueMessageType>;

Detalles

Modificadores personalizados para mensajes vinculados.

Ver:

n

Formato Numérico

Firma:

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

Detalles

Para más detalles sobre las funciones, consulta ComposerNumberFormatting

numberFormats

Firma:

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

Detalles

Los formatos numéricos de localización.

Ver:

pluralRules

Firma:

typescript
readonly pluralRules: PluralizationRules;

Detalles

Un conjunto de reglas para la pluralización de palabras

Ver:

rt

Resolver traducción de mensaje de localización

Firma:

typescript
rt: ComposerResolveLocaleMessageTranslation<Locales>;

Detalles

Para más detalles sobre las funciones, consulta ComposerResolveLocaleMessageTranslation

t

Traducción de mensaje de localización

Firma:

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

Detalles

Para más detalles sobre las funciones, consulta ComposerTranslation

warnHtmlMessage

Firma:

typescript
warnHtmlMessage: boolean;

Detalles

Si se permite el uso de mensajes de localización con formato HTML.

Si estableces false, verificará los mensajes de localización en la instancia de Composer.

Si especificas true, se mostrará una advertencia en la consola.

Ver:

getDateTimeFormat(locale)

Obtener formato de fecha y hora

Firma:

typescript
getDateTimeFormat<DateTimeSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<NonNullable<DateTimeFormats>>, Return = IsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{
        [K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
    }> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema>(locale: LocaleSchema | Locale): Return;

Parámetros de tipo

ParámetroDescripción
DateTimeSchemaEsquema de formato de fecha y hora, por defecto never

Detalles

obtener formato de fecha y hora desde la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo

Retorna

Formato de fecha y hora

getLocaleMessage(locale)

Obtener mensaje de localización

Firma:

typescript
getLocaleMessage<MessageSchema extends LocaleMessage<VueMessageType> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, Return = IsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{
        [K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
    }> : NonNullable<Messages>[Locale] : MessageSchema>(locale: LocaleSchema | Locale): Return;

Parámetros de tipo

ParámetroDescripción
MessageSchemaEsquema de mensaje de localización, por defecto never

Detalles

obtener mensaje de localización desde la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo

Retorna

Mensajes de localización

getMissingHandler()

Obtener manejador de mensajes faltantes

Firma:

typescript
getMissingHandler(): MissingHandler | null;

Parámetros

ParámetroTipoDescripción

Retorna

MissingHandler

getNumberFormat(locale)

Obtener formato numérico

Firma:

typescript
getNumberFormat<NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<NonNullable<NumberFormats>>, Return = IsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{
        [K in keyof DefineNumberFormat]: DefineNumberFormat[K];
    }> : NonNullable<NumberFormats>[Locale] : NumberSchema>(locale: LocaleSchema | Locale): Return;

Parámetros de tipo

ParámetroDescripción
NumberSchemaEsquema de formato numérico, por defecto never

Detalles

obtener formato numérico desde la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo

Retorna

Formato numérico

getPostTranslationHandler()

Obtener manejador de traducción posterior

Firma:

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

Parámetros

ParámetroTipoDescripción

Retorna

mergeDateTimeFormat(locale, format)

Combinar formato de fecha y hora

Firma:

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

Parámetros de tipo

ParámetroDescripción
DateTimeSchemaEsquema de formato de fecha y hora, por defecto never

Detalles

Combinar formato de fecha y hora a la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
formatFormatsUn formato de fecha y hora objetivo

mergeLocaleMessage(locale, message)

Combinar mensaje de localización

Firma:

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

Parámetros de tipo

ParámetroDescripción
MessageSchemaEsquema de mensaje de localización, por defecto never

Detalles

Combinar mensaje de localización a la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
messageMessageUn mensaje

mergeNumberFormat(locale, format)

Combinar formato numérico

Firma:

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

Parámetros de tipo

ParámetroDescripción
NumberSchemaEsquema de formato numérico, por defecto never

Detalles

Combinar formato numérico a la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
formatFormatsUn formato numérico objetivo

setDateTimeFormat(locale, format)

Establecer formato de fecha y hora

Firma:

typescript
setDateTimeFormat<DateTimeSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<DateTimeFormats>> = PickupLocales<NonNullable<DateTimeFormats>>, FormatsType = IsNever<DateTimeSchema> extends true ? IsEmptyObject<DateTimeFormats> extends true ? RemoveIndexSignature<{
        [K in keyof DefineDateTimeFormat]: DefineDateTimeFormat[K];
    }> : NonNullable<DateTimeFormats>[Locale] : DateTimeSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats): void;

Parámetros de tipo

ParámetroDescripción
DateTimeSchemaEsquema de formato de fecha y hora, por defecto never

Detalles

Establecer formato de fecha y hora en la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
formatFormatsUn formato de fecha y hora objetivo

setLocaleMessage(locale, message)

Establecer mensaje de localización

Firma:

typescript
setLocaleMessage<MessageSchema extends LocaleMessage<VueMessageType> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, MessageType = IsNever<MessageSchema> extends true ? IsEmptyObject<Messages> extends true ? RemoveIndexSignature<{
        [K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
    }> : NonNullable<Messages>[Locale] : MessageSchema, Message extends MessageType = MessageType>(locale: LocaleSchema | Locale, message: Message): void;

Parámetros de tipo

ParámetroDescripción
MessageSchemaEsquema de mensaje de localización, por defecto never

Detalles

Establecer mensaje de localización en la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
messageMessageUn mensaje

setMissingHandler(handler)

Establecer manejador de mensajes faltantes

Firma:

typescript
setMissingHandler(handler: MissingHandler | null): void;

Parámetros

ParámetroTipoDescripción
handlerMissingHandler | nullUn MissingHandler

setNumberFormat(locale, format)

Establecer formato numérico

Firma:

typescript
setNumberFormat<NumberSchema extends Record<string, any> = never, LocaleSchema extends string = string, Locale extends PickupLocales<NonNullable<NumberFormats>> = PickupLocales<NonNullable<NumberFormats>>, FormatsType = IsNever<NumberSchema> extends true ? IsEmptyObject<NumberFormats> extends true ? RemoveIndexSignature<{
        [K in keyof DefineNumberFormat]: DefineNumberFormat[K];
    }> : NonNullable<NumberFormats>[Locale] : NumberSchema, Formats extends FormatsType = FormatsType>(locale: LocaleSchema | Locale, format: Formats): void;

Parámetros de tipo

ParámetroDescripción
NumberSchemaEsquema de formato numérico, por defecto never

Detalles

Establecer formato numérico en la instancia de Composer.

Parámetros

ParámetroTipoDescripción
localeLocaleSchema | LocaleUn locale objetivo
formatFormatsUn formato numérico objetivo

setPostTranslationHandler(handler)

Establecer manejador de traducción posterior

Firma:

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

Parámetros

ParámetroTipoDescripción
handlerPostTranslationHandler<VueMessageType> | nullUn

te(key, locale)

Verificar existencia de traducción de mensaje de localización

Firma:

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

Detalles

si existe o no un mensaje de localización en la instancia de Composer.

Si especificas locale, verifica los mensajes de localización de locale.

Parámetros

ParámetroTipoDescripción
keyStr | KeyUna clave de mensaje de localización objetivo
localeLocalesUn locale, será utilizado sobre el ámbito global o local

Retorna

Si se encuentra el mensaje de localización, true, de lo contrario false. Nótese que false se retorna incluso si el valor presente en la clave no es traducible, sin embargo si translateExistCompatible está configurado como true, retornará true si la clave está disponible, aun cuando el valor no sea traducible.

tm(key)

Obtener mensajes de localización

Firma:

typescript
tm<Key extends string, ResourceKeys extends PickupKeys<Messages> = PickupKeys<Messages>, Locale extends PickupLocales<NonNullable<Messages>> = PickupLocales<NonNullable<Messages>>, Target = IsEmptyObject<Messages> extends false ? NonNullable<Messages>[Locale] : RemoveIndexSignature<{
        [K in keyof DefineLocaleMessage]: DefineLocaleMessage[K];
    }>, Return = ResourceKeys extends ResourcePath<Target> ? ResourceValue<Target, ResourceKeys> : Record<string, any>>(key: Key | ResourceKeys): Return;

Detalles

Si I18nScope es 'local' o algunos UseI18nOptions son especificados en useI18n, la traducción se hace preferentemente usando mensajes de localización del ámbito local antes que los del ámbito global.

Basado en el locale actual, se devolverán los mensajes de localización de la instancia de Composer.

Si cambias el locale, los mensajes de localización devueltos también corresponderán al nuevo locale.

Si no hay mensajes de localización para la key dada en los mensajes de la instancia de Composer, serán devueltos mediante fallbacking.

[!WARNING] Necesitas usar rt para los mensajes de localización devueltos por tm. Ver los detalles de rt.

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeysUna clave de mensaje de localización objetivo

Retorna

Mensajes de localización

Ejemplos

Bloque plantilla:

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

Bloque script:

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

ComposerAdditionalOptions

Opciones adicionales de Composer para useI18n

Firma:

typescript
export interface ComposerAdditionalOptions

Detalles

ComposerAdditionalOptions extiende ComposerOptions, por lo tanto puedes especificar estas opciones.

useScope

ComposerCustom

Definición personalizada del tipo Composer

Firma:

typescript
export interface ComposerCustom

Detalles

La interfaz que puede extender Composer.

El tipo definido por terceros (ej. nuxt/i18n)

Ejemplos

ts
// vue-i18n.d.ts (archivo `.d.ts` en tu aplicación)

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

ComposerDateTimeFormatting

Funciones de formato de fecha y hora

Firma:

typescript
export 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>

Detalles

Esta es la interfaz para Composer

(value: number | Date | string): string;

Formato de fecha y hora

Firma:

typescript
(value: number | Date | string): string;

Detalles

Si esto se usa en un contexto reactivo, se evaluará nuevamente una vez que cambie el locale.

Si 'local' o algunos UseI18nOptions son especificados en useI18n, se traduce preferentemente usando formatos de fecha y hora del ámbito local antes que los del ámbito global.

De lo contrario, se formatea con formatos de fecha y hora del ámbito global.

Ver:

Parámetros

ParámetroTipoDescripción
valuenumber | Date | stringUn valor, número de timestamp o instancia de Date o cadena ISO 8601

Retorna

Valor formateado

(value: Value, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;

Formato de fecha y hora

Firma:

typescript
<Value extends number | Date | string = number, Key extends string = string, OptionsType extends Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales>>(value: Value, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;

Detalles

Sobrecarga d.

En esta sobrecarga d, se formatea en formato de fecha y hora para una clave registrada en formatos de fecha y hora.

Parámetros

ParámetroTipoDescripción
valueValueUn valor, número de timestamp o instancia de Date o cadena ISO 8601
keyOrOptionsOptionsTypeUna clave de formatos de fecha y hora o adicionales para formato de fecha y hora

Retorna

Valor formateado

(value: Value, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;

Formato de fecha y hora

Firma:

typescript
<Value extends number | Date | string = number, Key extends string = string, OptionsType extends Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | DateTimeOptions<Key | ResourceKeys, Locales>>(value: Value, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.DateTimeFormatPart[] : string;

Detalles

Sobrecarga d.

En esta sobrecarga d, se formatea en formato de fecha y hora para una clave registrada en formatos de fecha y hora en el locale objetivo.

Parámetros

ParámetroTipoDescripción
valueValueUn valor, número de timestamp o instancia de Date o cadena ISO 8601
keyOrOptionsOptionsTypeUna clave de formatos de fecha y hora o adicionales para formato de fecha y hora
localeLocalesUn locale, será utilizado sobre el ámbito global o local.

Retorna

Valor formateado

ComposerNumberFormatting

Funciones de formato numérico

Firma:

typescript
export interface ComposerNumberFormatting<NumberFormats extends Record<string, any> = {}, Locales = 'en-US', DefinedNumberFormat extends RemovedIndexResources<DefineNumberFormat> = RemovedIndexResources<DefineNumberFormat>, C = IsEmptyObject<DefinedNumberFormat> extends false ? PickupFormatPathKeys<{
    [K in keyof DefinedNumberFormat]: DefinedNumberFormat[K];
}> : never, M = IsEmptyObject<NumberFormats> extends false ? PickupFormatKeys<NumberFormats> : never, ResourceKeys extends C | M = IsNever<C> extends false ? IsNever<M> extends false ? C | M : C : IsNever<M> extends false ? M : never>

Detalles

Esta es la interfaz para Composer

(value: number): string;

Formato Numérico

Firma:

typescript
(value: number): string;

Detalles

Si esto se usa en un contexto reactivo, se evaluará nuevamente una vez que cambie el locale.

Si 'local' o algunos UseI18nOptions son especificados en useI18n, se traduce preferentemente usando formatos de fecha y hora del ámbito local antes que los del ámbito global.

De lo contrario, se formatea con formatos numéricos del ámbito global.

Ver:

Parámetros

ParámetroTipoDescripción
valuenumberUn valor numérico

Retorna

Valor formateado

(value: number, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;

Formato Numérico

Firma:

typescript
<Key extends string = string, OptionsType extends Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales>>(value: number, keyOrOptions: OptionsType): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;

Detalles

Sobrecarga n.

En esta sobrecarga n, se formatea en formato numérico para una clave registrada en formatos numéricos.

Parámetros

ParámetroTipoDescripción
valuenumberUn valor numérico
keyOrOptionsOptionsTypeUna clave de formatos numéricos o adicionales para formato numérico

Retorna

Valor formateado

(value: number, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;

Formato Numérico

Firma:

typescript
<Key extends string = string, OptionsType extends Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales> = Key | ResourceKeys | NumberOptions<Key | ResourceKeys, Locales>>(value: number, keyOrOptions: OptionsType, locale: Locales): IsPart<OptionsType> extends true ? Intl.NumberFormatPart[] : string;

Detalles

Sobrecarga n.

En esta sobrecarga n, se formatea en formato numérico para una clave registrada en formatos numéricos en el locale objetivo.

Parámetros

ParámetroTipoDescripción
valuenumberUn valor numérico
keyOrOptionsOptionsTypeUna clave de formatos numéricos o adicionales para formato numérico
localeLocalesUn locale, será utilizado sobre el ámbito global o local.

Retorna

Valor formateado

ComposerOptions

Opciones de Composer

Firma:

typescript
export interface ComposerOptions<Schema extends {
    message?: unknown;
    datetime?: unknown;
    number?: unknown;
} = {
    message: DefaultLocaleMessageSchema;
    datetime: DefaultDateTimeFormatSchema;
    number: DefaultNumberFormatSchema;
}, Locales extends {
    messages: unknown;
    datetimeFormats: unknown;
    numberFormats: unknown;
} | string = Locale, MessagesLocales = Locales extends {
    messages: infer M;
} ? M : Locales extends string ? Locales : Locale, DateTimeFormatsLocales = Locales extends {
    datetimeFormats: infer D;
} ? D : Locales extends string ? Locales : Locale, NumberFormatsLocales = Locales extends {
    numberFormats: infer N;
} ? N : Locales extends string ? Locales : Locale, MessageSchema = Schema extends {
    message: infer M;
} ? M : DefaultLocaleMessageSchema, DateTimeSchema = Schema extends {
    datetime: infer D;
} ? D : DefaultDateTimeFormatSchema, NumberSchema = Schema extends {
    number: infer N;
} ? N : DefaultNumberFormatSchema, _Messages extends LocaleMessages<MessageSchema, MessagesLocales, VueMessageType> = LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>, _DateTimeFormats extends DateTimeFormatsType<DateTimeSchema, DateTimeFormatsLocales> = DateTimeFormatsType<DateTimeSchema, DateTimeFormatsLocales>, _NumberFormats extends NumberFormatsType<NumberSchema, NumberFormatsLocales> = NumberFormatsType<NumberSchema, NumberFormatsLocales>>

Detalles

Estas son las opciones para crear un compositor.

datetime

datetimeFormats

escapeParameter

Firma:

typescript
escapeParameter?: boolean;

Detalles

Si escapeParameter está configurado como true, entonces los parámetros de interpolación son escapados antes de que se traduzca el mensaje.

Esto es útil cuando la salida de traducción se usa en v-html y el recurso de traducción contiene marcado HTML (por ejemplo, alrededor de un valor proporcionado por el usuario).

Este patrón de uso ocurre principalmente al pasar cadenas de texto precalculadas a componentes de interfaz.

El proceso de escape implica reemplazar los siguientes símbolos con sus respectivas entidades de caracteres HTML: <, >, ", '.

Establecer escapeParameter como true no debería romper la funcionalidad existente pero proporciona una protección contra ciertos vectores de ataque XSS.

Ver:

false

fallbackFormat

Firma:

typescript
fallbackFormat?: boolean;

Detalles

Si hacer interpolación de plantillas en claves de traducción cuando tu idioma carece de traducción para una clave.

Si true, salta escribir plantillas para tu idioma "base"; las claves son tus plantillas.

Ver:

false

fallbackLocale

Firma:

typescript
fallbackLocale?: FallbackLocale;

Detalles

El locale de localización de fallback.

Para definiciones más complejas de fallback, ver fallback.

Ver:

El valor por defecto 'en-US' para locale si no se especifica, o su valor locale

fallbackRoot

Firma:

typescript
fallbackRoot?: boolean;

Detalles

En la localización del componente, si hacer fallback al nivel raíz (ámbito global) de localización cuando falla la localización.

Si false, no se hace fallback a la raíz.

Ver:

true

fallbackWarn

Firma:

typescript
fallbackWarn?: boolean | RegExp;

Detalles

Si suprimir advertencias al hacer fallback a fallbackLocale o raíz.

Si false, se suprimen las advertencias de fallback.

Si usas expresión regular, puedes suprimir advertencias de fallback que coincidan con la clave de traducción (por ejemplo, t).

Ver:

true

flatJson

Firma:

typescript
flatJson?: boolean;

Detalles

Permitir el uso de mensajes JSON planos o no

false

inheritLocale

Firma:

typescript
inheritLocale?: boolean;

Detalles

Si heredar el locale de nivel raíz al locale de localización del componente.

Si false, independientemente del locale de nivel raíz, se localiza para cada locale de componente.

Ver:

true

locale

Firma:

typescript
locale?: Locale;

Detalles

El locale de localización.

Si el locale contiene un territorio y un dialecto, este locale contiene un fallback implícito.

Ver:

'en-US'

message

messageCompiler

Firma:

typescript
messageCompiler?: MessageCompiler;

Detalles

Un compilador para formato de mensaje personalizado.

Si no se especifica, se utilizará el compilador de mensaje por defecto de vue-i18n.

Necesitarás implementar tu propio compilador de mensaje que retorne Funciones de Mensaje.

Ejemplos

Aquí hay un ejemplo de cómo personalizar el compilador de mensaje con intl-messageformat

js
import { createI18n } from 'vue-i18n'
import IntlMessageFormat from 'intl-messageformat'

function messageCompiler(message, { locale, key, onError }) {
  if (typeof message === 'string') {
    // Puedes optimizar el rendimiento de tu compilador de mensaje con tu estrategia de caché o memoización aquí
    const formatter = new IntlMessageFormat(message, locale)
    return ctx => formatter.format(ctx.values)
  } else {
    // Si quieres soportarlo para AST,
    // Necesitas transformar mensajes de localización tales como `json`, `yaml`, etc. con el plugin de empaquetado.
    onError && onError(new Error('not support for AST'))
    return () => key // retornar por defecto con `key`
  }
}

// llamado con opción I18n
const i18n = createI18n({
  locale: 'ja',
  messageCompiler, // establecer tu compilador de mensaje
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      // Formato de mensaje ICU
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    },
  }
})

// el siguiente es algo que hagas ...
// ...

[!TIP] 🆕 v9.3+

[!WARNING] El Formato de Mensaje Personalizado es una función experimental. Puede recibir cambios rotos o ser removida en el futuro.

Ver:

undefined

messageResolver

Firma:

typescript
messageResolver?: MessageResolver;

Detalles

Un resolutor de mensaje a resolver.

Si no se especifica, se utilizará por defecto el resolutor de mensaje interno de vue-i18n.

Necesitas implementar tú mismo un resolutor de mensaje que soporte los siguientes requisitos:

  • Resuelve el mensaje usando el mensaje de localización pasado como primer argumento del resolutor de mensaje, y la ruta pasada como segundo argumento.

  • Si el mensaje no se pudo resolver, necesitas retornar null.

  • Si se retorna null, el resolutor de mensaje también será llamado en fallback si está activado, por lo tanto el mensaje también necesita resolverse.

El resolutor de mensaje es llamado indirectamente por las siguientes APIs:


Ejemplos

Aquí está un ejemplo de cómo configurarlo usando tu createI18n:

js
import { createI18n } from 'vue-i18n'

// tu resolutor de mensaje
function messageResolver(obj, path) {
  // ¡simple resolución de mensaje!
  const msg = obj[path]
  return msg != null ? msg : null
}

// llamado con opción I18n
const i18n = createI18n({
  locale: 'ja',
  messageResolver, // establecer tu resolutor de mensaje
  messages: {
    en: { ... },
    ja: { ... }
  }
})

// el siguiente es algo que hagas ...
// ...

[!TIP] 🆕 v9.2+

[!WARNING] Si usas el resolutor de mensaje, la configuración de será ignorada. Es decir, necesitas resolver el JSON plano tú mismo.

Ver:

undefined

messages

missing

Firma:

typescript
missing?: MissingHandler;

Detalles

Un manejador para la falta de localización.

El manejador es llamado con el locale objetivo de localización, la clave de ruta de localización, la instancia de Vue y valores.

Si se asigna un manejador de ausentes, y ocurre una falta de localización, no se muestra una advertencia.

null

missingWarn

Firma:

typescript
missingWarn?: boolean | RegExp;

Detalles

Si suprimir advertencias generadas cuando falla la localización.

Si false, se suprimen las advertencias de fallo de localización.

Si usas expresión regular, puedes suprimir advertencias de fallo de localización que coinciden con la clave de traducción (por ejemplo, t).

Ver:

true

modifiers

Firma:

typescript
modifiers?: LinkedModifiers<VueMessageType>;

Detalles

Modificadores personalizados para mensajes vinculados.

Ver:

number

numberFormats

pluralRules

Firma:

typescript
pluralRules?: PluralizationRules;

Detalles

Un conjunto de reglas para la pluralización de palabras

Ver:

{}

postTranslation

Firma:

typescript
postTranslation?: PostTranslationHandler<VueMessageType>;

Detalles

Un manejador para procesamiento posterior de la traducción.

El manejador es llamado después de ser invocado con t.

Este manejador es útil si quieres filtrar texto traducido, como recortar espacios.

null

warnHtmlMessage

Firma:

typescript
warnHtmlMessage?: boolean;

Detalles

Si se permite el uso de mensajes de localización con formato HTML.

Ver la propiedad warnHtmlMessage.

Ver:

true

ComposerResolveLocaleMessageTranslation

Funciones de resolución de traducción de mensaje de localización

Firma:

typescript
export interface ComposerResolveLocaleMessageTranslation<Locales = 'en-US'>

Detalles

Esta es la interfaz para Composer

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

Resolver traducción de mensaje de localización

Firma:

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

Detalles

Si esto se usa en un contexto reactivo, se evaluará nuevamente una vez que cambie el locale.

Si 'local' o algunos UseI18nOptions son especificados en useI18n, se traduce preferentemente usando mensajes de localización del ámbito local antes que los del ámbito global.

De lo contrario, se traduce con mensajes de localización del ámbito global.

[!TIP] El caso de uso para rt es para traducción de mensajes de localización programáticos usando tm, v-for, sentencia javascript for.

[!WARNING] rt difiere de t en que procesa directamente el mensaje de localización, no la clave del mensaje de localización. No hay fallback interno con rt. Necesitas entender y usar la estructura del mensaje de localización devuelto por tm.

Ver:

Parámetros

ParámetroTipoDescripción
messageMessageFunction<VueMessageType> | VueMessageTypeUn mensaje de localización objetivo a resolver. Necesitas especificar el mensaje de localización devuelto por tm.

Retorna

Mensaje traducido

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

Resolver traducción de mensaje de localización para plurales

Firma:

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

Detalles

Sobrecarga rt.

En esta sobrecarga rt, retorna un mensaje de traducción pluralizado.

[!TIP] El caso de uso para rt es para traducción de mensajes de localización programáticos usando tm, v-for, sentencia javascript for.

[!WARNING] rt difiere de t en que procesa directamente el mensaje de localización, no la clave del mensaje de localización. No hay fallback interno con rt. Necesitas entender y usar la estructura del mensaje de localización devuelto por tm.

Ver:

Parámetros

ParámetroTipoDescripción
messageMessageFunction<VueMessageType> | VueMessageTypeUn mensaje de localización objetivo a resolver. Necesitas especificar el mensaje de localización devuelto por tm.
pluralnumberCuál cadena plural obtener. 1 retorna la primera.
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

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

Resolver traducción de mensaje de localización para interpolaciones de listas

Firma:

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

Detalles

Sobrecarga rt.

En esta sobrecarga rt, retorna un mensaje de traducción pluralizado.

[!TIP] El caso de uso para rt es para traducción de mensajes de localización programáticos usando tm, v-for, sentencia javascript for.

[!WARNING] rt difiere de t en que procesa directamente el mensaje de localización, no la clave del mensaje de localización. No hay fallback interno con rt. Necesitas entender y usar la estructura del mensaje de localización devuelto por tm.

Ver:

Parámetros

ParámetroTipoDescripción
messageMessageFunction<VueMessageType> | VueMessageTypeUn mensaje de localización objetivo a resolver. Necesitas especificar el mensaje de localización devuelto por tm.
listunknown[]Valores de interpolación de lista.
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

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

Resolver traducción de mensaje de localización para interpolaciones nombradas

Firma:

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

Detalles

Sobrecarga rt.

En esta sobrecarga rt, para cada marcador de posición x, los mensajes de localización deben contener un token {x}.

[!TIP] El caso de uso para rt es para traducción de mensajes de localización programáticos usando tm, v-for, sentencia javascript for.

[!WARNING] rt difiere de t en que procesa directamente el mensaje de localización, no la clave del mensaje de localización. No hay fallback interno con rt. Necesitas entender y usar la estructura del mensaje de localización devuelto por tm.

Ver:

Parámetros

ParámetroTipoDescripción
messageMessageFunction<VueMessageType> | VueMessageTypeUn mensaje de localización objetivo a resolver. Necesitas especificar el mensaje de localización devuelto por tm.
namedNamedValueValores de interpolación nombrada.
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

ComposerTranslation

Funciones de traducción de mensaje de localización

Firma:

typescript
export interface ComposerTranslation<Messages extends Record<string, any> = {}, Locales = 'en-US', DefinedLocaleMessage extends RemovedIndexResources<DefineLocaleMessage> = RemovedIndexResources<DefineLocaleMessage>, C = IsEmptyObject<DefinedLocaleMessage> extends false ? JsonPaths<{
    [K in keyof DefinedLocaleMessage]: DefinedLocaleMessage[K];
}> : never, M = IsEmptyObject<Messages> extends false ? TranslationsPaths<Messages> : never, ResourceKeys extends C | M = IsNever<C> extends false ? IsNever<M> extends false ? C | M : C : IsNever<M> extends false ? M : never>

Detalles

Esta es la interfaz para Composer

(key: Key | ResourceKeys | number): string;

Traducción de mensaje de localización

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number): string;

Detalles

Si esto se usa en un contexto reactivo, se evaluará nuevamente una vez que cambie el locale.

Si I18nScope es 'local' o algunos UseI18nOptions son especificados en useI18n, se traduce preferentemente usando mensajes de localización del ámbito local antes que los del ámbito global.

De lo contrario, se traduce con mensajes de localización del ámbito global.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, named: NamedValue): string;

Traducción de mensaje de localización para interpolaciones nombradas

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, para cada marcador de posición x, los mensajes de localización deben contener un token {x}.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
namedNamedValueValores de interpolación nombrada

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, named: NamedValue, plural: number): string;

Traducción de mensaje de localización para interpolaciones nombradas y plurales

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, plural: number): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, para cada marcador de posición x, los mensajes de localización deben contener un token {x}, y retorna un mensaje de traducción pluralizado.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
namedNamedValueValores de interpolación nombrada
pluralnumberCuál cadena plural obtener. 1 retorna la primera.

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, named: NamedValue, defaultMsg: string): string;

Traducción de mensaje de localización para interpolaciones nombradas y plurales

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, defaultMsg: string): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, para cada marcador de posición x, los mensajes de localización deben contener un token {x}, y si no se encuentra traducción, retorna un mensaje por defecto.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
namedNamedValueValores de interpolación nombrada
defaultMsgstringUn mensaje por defecto para retornar si no se encuentra traducción

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, named: NamedValue, options: TranslateOptions<Locales>): string;

Traducción de mensaje de localización para interpolaciones nombradas

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, options: TranslateOptions<Locales>): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, para cada marcador de posición x, los mensajes de localización deben contener un token {x}.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver detalles de opciones, consulta la .

Cómo usar en detalle:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
namedNamedValueValores de interpolación nombrada
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, plural: number): string;

Traducción de mensaje de localización para plurales

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, plural: number): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, retorna un mensaje de traducción pluralizado.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
pluralnumberCuál cadena plural obtener. 1 retorna la primera.

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, plural: number, options: TranslateOptions<Locales>): string;

Traducción de mensaje de localización para plurales

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, plural: number, options: TranslateOptions<Locales>): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, retorna un mensaje de traducción pluralizado.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver detalles de opciones, consulta la .

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
pluralnumberCuál cadena plural obtener. 1 retorna la primera.
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, defaultMsg: string): string;

Traducción de mensaje de localización para mensaje por defecto faltante

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, defaultMsg: string): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, si no se encuentra traducción, retorna un mensaje por defecto.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
defaultMsgstringUn mensaje por defecto para retornar si no se encuentra traducción

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, defaultMsg: string, options: TranslateOptions<Locales>): string;

Traducción de mensaje de localización para mensaje por defecto faltante

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, defaultMsg: string, options: TranslateOptions<Locales>): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, si no se encuentra traducción, retorna un mensaje por defecto.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver detalles de opciones, consulta la .

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
defaultMsgstringUn mensaje por defecto para retornar si no se encuentra traducción
optionsTranslateOptions<Locales>Adicionales para traducción

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, list: unknown[]): string;

Traducción de mensaje de localización para interpolaciones de lista

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[]): string;

Detalles

Sobrecarga t.

En esta sobrecarga t, los mensajes de localización deben contener {0}, {1}, … para cada marcador de posición en la lista.

También puedes suprimir la advertencia, cuando la traducción falta según las opciones.

Ver:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
listunknown[]Valores de interpolación de lista

Retorna

Mensaje traducido

(key: Key | ResourceKeys | number, list: unknown[], plural: number): string;

Traducción de mensaje de localización para interpolaciones de lista y plurales

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], plural: number): string;

Details

Sobrecarga de t.

En esta sobrecarga de t, los mensajes de localización deben contener un {0}, {1}, etc., por cada marcador de posición en la lista y devolver un mensaje de traducción con pluralización.

Consultar:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
listunknown[]Valores para la interpolación de lista
pluralnumberCuál cadena en plural obtener. 1 devuelve la primera.

Devuelve

Mensaje traducido

(key: Key | ResourceKeys | number, list: unknown[], defaultMsg: string): string;

Traducción de mensajes de localización para interpolaciones de lista y mensaje predeterminado faltante

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], defaultMsg: string): string;

Detalles

Sobrecarga de t.

Consultar:

En esta sobrecarga de t, los mensajes de localización deben contener un {0}, {1}, etc., por cada marcador de posición en la lista, y si no se encuentra una traducción, se devuelve un mensaje predeterminado.

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
listunknown[]Valores para la interpolación de lista
defaultMsgstringUn mensaje predeterminado que se devuelve si no se encuentra una traducción

Devuelve

Mensaje traducido

(key: Key | ResourceKeys | number, list: unknown[], options: TranslateOptions<Locales>): string;

Traducción de mensajes de localización para interpolaciones de lista

Firma:

typescript
<Key extends string>(key: Key | ResourceKeys | number, list: unknown[], options: TranslateOptions<Locales>): string;

Detalles

Sobrecarga de t.

En esta sobrecarga de t, los mensajes de localización deben contener un {0}, {1}, etc., por cada marcador de posición en la lista.

También puedes suprimir la advertencia cuando falta la traducción según las opciones.

Para detalles sobre las opciones, consulta la documentación.

Cómo usar para más información:

Parámetros

ParámetroTipoDescripción
keyKey | ResourceKeys | numberUna clave de mensaje de localización objetivo
listunknown[]Valores para la interpolación de lista
optionsTranslateOptions<Locales>Opciones adicionales para la traducción

Devuelve

Mensaje traducido

MissingHandler

Firma:

typescript
export type MissingHandler = (locale: Locale, key: Path, instance?: ComponentInternalInstance | GenericComponentInstance, type?: string) => string | void;

useI18n

Usa la API de Composición para Vue I18n

Firma:

typescript
export declare 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']>>;

Parámetros de tipo

ParámetroDescripción
SchemaEl esquema de recursos i18n (mensajes, formatos de fecha, formatos numéricos), por defecto
LocalesLos esquemas de localización de recursos i18n, por defecto en-US

Detalles

Esta función se utiliza principalmente en setup.

Si se especifican opciones, se crea una instancia de Composer por componente, y puedes realizar la localización en ese componente.

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

Parámetros

ParámetroTipoDescripción
optionsOptionsOpciones, ver UseI18nOptions

Devuelve

Instancia de Composer

Ejemplos

Caso: Localización basada en recursos del componente

html
<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: { ... }
     }
   })
   // Algo que hacer...

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

UseI18nOptions

Opciones de i18n para useI18n

Firma:

typescript
export type UseI18nOptions<Schema extends {
    message?: unknown;
    datetime?: unknown;
    number?: unknown;
} = {
    message: DefaultLocaleMessageSchema;
    datetime: DefaultDateTimeFormatSchema;
    number: DefaultNumberFormatSchema;
}, Locales extends {
    messages: unknown;
    datetimeFormats: unknown;
    numberFormats: unknown;
} | string = Locale, Options extends ComposerOptions<Schema, Locales> = ComposerOptions<Schema, Locales>> = ComposerAdditionalOptions & Options;

Detalles

UseI18nOptions hereda de ComposerAdditionalOptions y ComposerOptions, por lo tanto puedes especificar estas opciones.

VueMessageType

Firma:

typescript
export type VueMessageType = string | ResourceNode | VNode;