Funciones de Mensajes

Vue I18n recomienda utilizar los mensajes locales basados en lista, con nombre y formato literal al traducir mensajes.

Sin embargo, a veces la sintaxis del formato de mensaje basado en cadena es difícil de resolver.

Por ejemplo, supongamos que quieres manejar el siguiente mensaje en francés:

• Manger de la soupe
• Manger une pomme
• Manger du pain
• Manger de l’orge

Como puedes ver, el artículo que precede al sustantivo variará según el género y la fonética.

Las características compatibles con la sintaxis de formato de mensajes de Vue I18n pueden no ser capaces de soportar estos casos de uso específicos del idioma.

Sin embargo, hay situaciones en las que realmente necesitas toda la potencia programática de JavaScript debido a la complejidad de la sintaxis del idioma. Así que en lugar de mensajes basados en cadena, puedes usar las Funciones de Mensaje.

NOTA

Los mensajes escritos en sintaxis de formato de mensaje son compilados en funciones de mensaje con el compilador de mensajes de Vue I18n. Las funciones de mensaje y el mecanismo de caché para maximizar las ganancias de rendimiento.

Uso básico

Lo siguiente es una función de mensaje que devuelve un saludo simple:

const messages = {
  en: {
    greeting: (ctx) => 'hello!'
  }
}

La función de mensaje acepta el Contexto del Mensaje como primer argumento, que tiene varias propiedades y funciones. Explicaremos cómo usarlas en las siguientes secciones, así que vamos a continuar.

El uso de la función de mensaje es muy fácil. Solo tienes que especificar la clave de la función de mensaje con $t o t:

<p>{{ $t('greeting') }}</p>

La salida es la siguiente:

<p>hello!</p>

La función de mensaje devuelve el mensaje del valor de retorno de tipo cadena de la función de mensaje.

NOTA

Si necesitas usar el componente de Traducción (i18n-t), debes soportar devolver no solo el valor de tipo cadena, sino también el valor VNode.

Para soportar el uso del componente de Traducción, se utiliza la propiedad type del MessageContext como se muestra en el siguiente ejemplo de código:

import { createVNode, Text } from 'vue'

const messages = {
  en: {
    greeting: ({ type }) => type === 'vnode'
      ? createVNode(Text, null, 'hello', 0)
      : 'hello'
  }
}

Si aún no lo has hecho, se recomienda leer sobre la función de renderizado de Vue antes de adentrarte en las funciones de mensaje.

Interpolación con nombre

Vue I18n soporta interpolación con nombre como formato de mensaje basado en cadena. Vue I18n interpola los valores de parámetros con $t o t, y puede mostrarlos.

Puedes usar la función named del contexto del mensaje para hacer lo mismo.

Aquí está el ejemplo de saludo:

const messages = {
  en: {
    greeting: ({ named }) => `hello, ${named('name')}!`
  }
}

Plantilla:

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>

La salida es la siguiente:

<p>hello, DIO!</p>

Necesitas especificar la clave que resuelve el valor especificado con el nombre de $t o t.

Interpolación de lista

Vue I18n soporta interpolación de lista como formato de mensaje basado en cadena. Vue I18n interpola los valores de parámetros con $t o t, y puede mostrarlos.

Puedes usar la función list del contexto del mensaje para hacer lo mismo.

Aquí está el ejemplo de saludo:

const messages = {
  en: {
    greeting: ({ list }) => `hello, ${list(0)}!`
  }
}

Plantilla:

<p>{{ $t('greeting', ['DIO']) }}</p>

La salida es la siguiente:

<p>hello, DIO!</p>

Necesitas especificar el índice que resuelve el valor especificado con la lista de $t o t.

Mensajes vinculados

Vue I18n soporta mensajes vinculados como formato de mensaje basado en cadena. Vue I18n interpola los valores de parámetros con $t o t, y puede mostrarlos.

Puedes usar la función linked del contexto del mensaje para hacer lo mismo.

Aquí está el ejemplo de función de mensaje:

const messages = {
  en: {
    the_world: 'the world',
    dio: 'DIO:',
    linked: ({ linked }) => `${linked('message.dio')} ${linked('message.the_world')} !!!!`
  }
}

Plantilla:

<p>{{ $t('linked') }}</p>

La salida es la siguiente:

<p>DIO: the world !!!!</p>

Necesitas especificar la clave que resuelve el valor especificado con $t o t.

Pluralización

Vue I18n soporta pluralización como formato de mensaje basado en cadena. Vue I18n interpola los valores de parámetros con $t o t, y puede mostrarlos.

Puedes usar la función plural del contexto del mensaje para hacer lo mismo.

Aquí está el ejemplo de función de mensaje:

const messages = {
  en: {
    car: ({ plural }) => plural(['car', 'cars']),
    apple: ({ plural, named }) =>
      plural([
        'no apples',
        'one apple',
        `${named('count')} apples`
      ])
  }
}

Plantilla:

<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', { count: 10 }, 10) }}</p>

La salida es la siguiente:

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>

Necesitas especificar la clave que resuelve el valor especificado con $t o t.