Directiva personalizada

NOTA

La directiva v-t será obsoleta en la versión 11 y eliminada en la versión 12. Esta sección está destinada a usuarios que aún trabajan con la versión 10.

Además de usar $t, también puede utilizar la directiva personalizada v-t para las traducciones.

Sintaxis de cadena

Puede pasar la ruta de clave de los mensajes locales usando la sintaxis de cadena.

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'hi there!' },
    es: { hello: '¡hola!' },
  }
})

const app = createApp({
  data: () => ({ path: 'hello' })
})
app.use(i18n)
app.mount('#app')

Plantilla:

<div id="string-syntax">
  <!-- Usando un literal de cadena -->
  <p v-t="'hello'"></p>
  <!-- Enlazando una ruta de clave mediante datos -->
  <p v-t="path"></p>
</div>

Salida:

<div id="string-syntax">
  <p>hi there!</p>
  <p>hi there!</p>
</div>

Sintaxis de objeto

Alternativamente, puede usar la sintaxis de objeto.

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hi: 'Hi, {name}!'
        bye: 'Goodbye!',
        apple: 'no apples | one apple | {count} apples'
      }
    },
    es: {
      message: {
        hi: 'Hola, {name}!',
        bye: '¡Adiós!',
        apple: 'no apples | one apple | {count} apples'
      }
    }
  }
})

const app = createApp({
  data() {
    return {
      byePath: 'message.bye',
      appleCount: 7,
    }
  }
})
app.use(i18n)
app.mount('#object-syntax')

Plantilla:

<div id="object-syntax">
  <!-- Usando un objeto con argumentos -->
  <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
  <!-- Enlazando una ruta de clave mediante datos -->
  <p v-t="{ path: byePath, locale: 'en' }"></p>
  <!-- Pluralización -->
  <p v-t="{ path: 'message.apple', plural: appleCount }"></p>
</div>

Salida:

<div id="object-syntax">
  <p>こんにちは、kazupon！</p>
  <p>Goodbye!</p>
  <p>7 りんご</p>
</div>

Ámbito

Como se explica en la sección de ámbito, vue-i18n admite tanto ámbitos globales como locales.

El comportamiento de v-t depende del ámbito en el que se usa:

• Ámbito local: Se aplica cuando se usa la opción i18n en estilo de API heredado o se establece useScope: 'local' en useI18n.
• Ámbito global: Se usa en todos los demás casos.

$t vs v-t

$t

t es una función de la instancia VueI18n con las siguientes ventajas y desventajas:

Ventajas:

• Permite un uso flexible dentro de las plantillas, incluyendo la sintaxis de mustache {}.
• Soporta propiedades computadas y métodos dentro de componentes Vue.

Desventajas:

• $t se ejecuta en cada nueva representación, lo que puede añadir sobrecarga de traducción.

v-t

v-t es una directiva personalizada con su propio conjunto de ventajas y desventajas:

Ventajas:

• Ofrece un mejor rendimiento que $t, ya que las traducciones pueden ser preprocesadas por el módulo del compilador de Vue proporcionado por vue-i18n-extensions.
• Permite optimizaciones de rendimiento reduciendo la sobrecarga de traducción en tiempo de ejecución.

Desventajas:

• Menos flexible que $t; es más complejo de usar.
• Inserta el contenido traducido directamente en el textContent del elemento, lo cual significa que no se puede usar dentro de estructuras HTML en línea ni combinarse con otras expresiones dinámicas de plantilla.
• Cuando se utiliza renderizado en el lado del servidor (SSR), debe configurar una transformación personalizada estableciendo la opción directiveTransforms en la función compile de @vue/compiler-ssr.