Formato de mensaje personalizado

Versiones compatibles

🆕 9.3+

Como se describe en la sintaxis del formato de mensaje, el formato de mensaje de Vue I18n es original.

Si quieres usar un formato de mensaje como el formato de mensaje ICU, puedes usar un formato personalizado implementando tu propio compilador de mensajes.

WARNING

Este tema requiere comprender la compilación del formato de mensaje de Vue I18n y cómo se resuelven los formatos.

WARNING

La función es experimental. Puede recibir cambios que rompan o ser eliminada en el futuro.

Implementación del compilador de mensajes

Puedes crear un compilador de mensajes implementando funciones con las siguientes interfaces.

La siguiente es una definición de tipo TypeScript:

export declare type MessageCompiler<Message = string, MessageSource = string | ResourceNode> = (message: MessageSource, context: MessageCompilerContext) => MessageFunction<Message>;

A continuación se muestra un ejemplo de implementación de un compilador de mensajes que usa intl-messageformat para soportar el formato de mensaje ICU.

import IntlMessageFormat from 'intl-messageformat'

import type { MessageCompiler, CompileError, MessageContext } from 'vue-i18n'

export const messageCompiler: MessageCompiler = (
  message,
  { locale, key, onError }
) => {
  if (typeof message === 'string') {
    /**
     * Puedes optimizar aún más el rendimiento de tu compilador de mensajes con tu estrategia de caché o también con memoización aquí
     */
    const formatter = new IntlMessageFormat(message, locale)
    return (ctx: MessageContext) => {
      return formatter.format(ctx.values)
    }
  } else {
    /**
     * para AST.
     * Si deseas soportarlo,
     * Necesitas transformar mensajes regionales como `json`, `yaml`, etc. con el plugin de empaquetado.
     */
    onError && onError(new Error('not support for AST') as CompileError)
    return () => key
  }
}

Registro del compilador de mensajes

Después de implementar el compilador de mensajes, establece la opción messageCompiler de createI18n como se muestra a continuación, y puedes usar tu formato de mensaje para la opción messages:

import { createI18n } from 'vue-i18n'
import { messageCompiler } from './compilation'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messageCompiler,
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    }
  }
})

// lo que sigue es algo que hagas ...
// ...

Referencia

Al implementar el compilador de mensajes, te recomendamos leer y entender los códigos de compilación

INFO

Puedes obtener el código para el tutorial a continuación en examples/message-format.