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