Directive personnalisée

NOTE

La directive v-t sera dépréciée dans la version 11 et supprimée dans la version 12. Cette section est destinée aux utilisateurs qui travaillent toujours avec la version 10.

En plus d'utiliser $t, vous pouvez également utiliser la directive personnalisée v-t pour les traductions.

Syntaxe chaîne de caractères

Vous pouvez passer le chemin de clé des messages locaux en utilisant la syntaxe chaîne de caractères.

JavaScript :

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

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'hi there!' },
    ja: { hello: 'こんにちは！' }
  }
})

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

Modèle :

<div id="string-syntax">
  <!-- Utilisation d'une chaîne littérale -->
  <p v-t="'hello'"></p>
  <!-- Liaison d'un chemin de clé via données -->
  <p v-t="path"></p>
</div>

Résultat :

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

Syntaxe objet

Alternativement, vous pouvez utiliser la syntaxe objet.

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'
      }
    },
    ja: {
      message: {
        hi: 'こんにちは、{name}！',
        bye: 'さようなら！',
        apple: 'リンゴはありません | 一つのりんご | {count} りんご'
      }
    }
  }
})

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

Modèle :

<div id="object-syntax">
  <!-- Utilisation d'un objet avec arguments -->
  <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
  <!-- Liaison d'un chemin de clé via données -->
  <p v-t="{ path: byePath, locale: 'en' }"></p>
  <!-- Pluralisation -->
  <p v-t="{ path: 'message.apple', plural: appleCount }"></p>
</div>

Résultat :

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

Portée

Comme expliqué dans la section portée, vue-i18n prend en charge à la fois les portées globales et locales.

Le comportement de v-t dépend de la portée dans laquelle elle est utilisée :

• Portée locale : Appliquée lors de l'utilisation de l'option i18n en style d'API héritée ou en définissant useScope: 'local' dans useI18n.
• Portée globale : Utilisée dans tous les autres cas.

$t vs v-t

$t

$t est une fonction de l'instance VueI18n avec les avantages et inconvénients suivants :

Avantages :

• Permet une utilisation flexible dans les modèles, y compris la syntaxe mustache {}.
• Supporte les propriétés calculées et les méthodes dans les composants Vue.

Inconvénients :

• $t est exécuté à chaque nouveau rendu, ce qui peut ajouter une surcharge de traduction.

v-t

v-t est une directive personnalisée avec son propre ensemble d'avantages et d'inconvénients :

Avantages :

• Offre une meilleure performance que $t, car les traductions peuvent être prétraitées par le module du compilateur Vue fourni par vue-i18n-extensions.
• Permet des optimisations de performance en réduisant la surcharge de traduction au moment de l'exécution.

Inconvénients :

• Moins flexible que $t ; il est plus complexe à utiliser.
• Insère directement le contenu traduit dans le textContent de l'élément, ce qui signifie qu'il ne peut pas être utilisé à l'intérieur de structures HTML en ligne ou combiné avec d'autres expressions dynamiques de modèle.
• Lors de l'utilisation du rendu côté serveur (SSR), vous devez configurer une transformation personnalisée en définissant l'option directiveTransforms dans la fonction compile de @vue/compiler-ssr.