Skip to content

vue-i18n / general / ComposerOptions

Interface: ComposerOptions<Schema, Locales, MessagesLocales, DateTimeFormatsLocales, NumberFormatsLocales, MessageSchema, DateTimeSchema, NumberSchema, _Messages, _DateTimeFormats, _NumberFormats> ​

Opciones del Compositor

Comentarios ​

Estas son las opciones para crear un compositor.

Vue I18n Composition ​

Parámetros de Tipo ​

Parámetro de TipoTipo por defecto
Schema extends objectobject
Locales extends | { datetimeFormats: unknown; messages: unknown; numberFormats: unknown; } | stringLocale
MessagesLocalesLocales extends object ? M : Locales extends string ? Locales : Locale
DateTimeFormatsLocalesLocales extends object ? D : Locales extends string ? Locales : Locale
NumberFormatsLocalesLocales extends object ? N : Locales extends string ? Locales : Locale
MessageSchemaSchema extends object ? M : DefaultLocaleMessageSchema
DateTimeSchemaSchema extends object ? D : DefaultDateTimeFormatSchema
NumberSchemaSchema extends object ? N : DefaultNumberFormatSchema
_Messages extends LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>LocaleMessages<MessageSchema, MessagesLocales, VueMessageType>
_DateTimeFormats extends IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>IntlDateTimeFormats<DateTimeSchema, DateTimeFormatsLocales>
_NumberFormats extends IntlNumberFormats<NumberSchema, NumberFormatsLocales>IntlNumberFormats<NumberSchema, NumberFormatsLocales>

Propiedades ​

datetimeFormats? ​

ts
optional datetimeFormats: { [K in string | number | symbol]: DateTimeSchema };

Comentarios ​

Los formatos de fecha y hora de localización.

Ver:

Valor por defecto ​

{}


escapeParameter? ​

ts
optional escapeParameter: boolean;

Comentarios ​

Si escapeParameter se configura como verdadero, los parámetros de interpolación se escapan antes de que el mensaje sea traducido.

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

Este patrón de uso ocurre principalmente cuando se pasan cadenas de texto precalculadas a componentes de interfaz.

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

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

Ver:

Valor por defecto ​

false


fallbackFormat? ​

ts
optional fallbackFormat: boolean;

Comentarios ​

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

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

Ver:

Valor por defecto ​

false


fallbackLocale? ​

ts
optional fallbackLocale: FallbackLocale;

Comentarios ​

La configuración regional de fallback de localización.

Para definiciones de fallback más complejas ver fallback.

Ver:

Valor por defecto ​

El valor predeterminado 'en-US' para locale si no se especifica, o el valor de locale


fallbackRoot? ​

ts
optional fallbackRoot: boolean;

Comentarios ​

En la localización de componentes, si se debe hacer fallback a la localización de nivel raíz (ámbito global) cuando la localización falla.

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

Ver:

Valor por defecto ​

true


fallbackWarn? ​

ts
optional fallbackWarn: boolean | RegExp;

Comentarios ​

Si se deben suprimir las advertencias al hacer fallback a fallbackLocale o a la raíz.

Si false, se suprimen las advertencias de fallback.

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

Ver:

Valor por defecto ​

true


flatJson? ​

ts
optional flatJson: boolean;

Comentarios ​

Permitir usar mensajes JSON planos o no

Valor por defecto ​

false


inheritLocale? ​

ts
optional inheritLocale: boolean;

Comentarios ​

Si se hereda la configuración regional de nivel raíz a la configuración regional de localización del componente.

Si false, independientemente de la configuración regional de nivel raíz, se hace localización para cada configuración regional de componente.

Ver:

Valor por defecto ​

true


locale? ​

ts
optional locale: string;

Comentarios ​

La configuración regional de localización.

Si la configuración regional contiene un territorio y un dialecto, esta configuración regional contiene un fallback implícito.

Ver:

Valor por defecto ​

'en-US'


messageCompiler? ​

ts
optional messageCompiler: MessageCompiler;

Comentarios ​

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 devuelva funciones de mensaje

Ejemplo ​

Aquí hay un ejemplo de cómo crear un compilador de mensaje personalizado 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 más con tu estrategia de caché o también memoización aquí
    const formatter = new IntlMessageFormat(message, locale)
    return ctx => formatter.format(ctx.values)
  } else {
    // Si quieres soportarlo para AST,
    // Necesitas transformar los mensajes locales como `json`, `yaml`, etc. con el plugin de paquete.
    onError && onError(new Error('no se soporta para AST'))
    return () => key // devuelve por defecto con `key`
  }
}

// Llamada con opción I18n
const i18n = createI18n({
  locale: 'ja',
  messageCompiler, // establece 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.}
      }`
    },
  }
})

// lo 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 eliminada en el futuro.

Ver:

Valor por defecto ​

undefined


messageResolver? ​

ts
optional messageResolver: MessageResolver;

Comentarios ​

Un resolvedor de mensajes para resolver mensajes.

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

Necesitas implementar tú mismo un resolvedor de mensajes que soporte los siguientes requisitos:

  • Resolver el mensaje usando el mensaje de configuración regional de locale pasado como primer argumento del resolvedor de mensajes, y la ruta pasada como segundo argumento.

  • Si el mensaje no pudo ser resuelto, debes devolver null.

  • Si se devuelve null, el resolvedor de mensajes también será llamado en fallback si fallbackLocale está activado, por lo que el mensaje también necesitará ser resuelto.

El resolvedor de mensajes es llamado indirectamente por las siguientes APIs:

Ejemplo ​

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

js
import { createI18n } from 'vue-i18n'

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

// llamada con opción I18n
const i18n = createI18n({
  locale: 'ja',
  messageResolver, // establece tu resolvedor de mensajes
  messages: {
    en: { ... },
    ja: { ... }
  }
})

// lo siguiente es algo que hagas...
// ...

TIP

🆕 v9.2+

WARNING

Si usas el resolvedor de mensajes, la configuración Composer#flatJson será ignorada. Es decir, necesitas resolver el JSON plano tú mismo.

Ver:

Valor por defecto ​

undefined


messages? ​

ts
optional messages: { [K in string | number | symbol]: MessageSchema };

Comentarios ​

Los mensajes de configuración regional de localización.

Ver:

Valor por defecto ​

{}


missing? ​

ts
optional missing: MissingHandler;

Comentarios ​

Un manejador para la localización faltante.

El manejador es llamado con la configuración regional objetivo de localización, la clave de ruta de localización, la instancia de Vue y los valores.

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

Valor por defecto ​

null


missingWarn? ​

ts
optional missingWarn: boolean | RegExp;

Comentarios ​

Si se deben suprimir las advertencias mostradas cuando falla la localización.

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

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

Ver:

Valor por defecto ​

true


modifiers? ​

ts
optional modifiers: LinkedModifiers<VueMessageType>;

Comentarios ​

Modificadores personalizados para mensajes vinculados.

Ver:


numberFormats? ​

ts
optional numberFormats: { [K in string | number | symbol]: NumberSchema };

Comentarios ​

Los formatos numéricos de localización.

Ver:

Valor por defecto ​

{}


pluralRules? ​

ts
optional pluralRules: PluralizationRules;

Comentarios ​

Un conjunto de reglas para la pluralización de palabras

Ver:

Valor por defecto ​

{}


postTranslation? ​

ts
optional postTranslation: PostTranslationHandler<VueMessageType>;

Comentarios ​

Un manejador para el post-procesamiento de la traducción.

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

Este manejador es útil si quieres filtrar el texto traducido, como el recorte de espacios.

Valor por defecto ​

null


warnHtmlMessage? ​

ts
optional warnHtmlMessage: boolean;

Comentarios ​

Si se permite usar mensajes de configuración regional con formato HTML.

Ver la propiedad warnHtmlMessage.

Ver:

Valor por defecto ​

true