Localisation basée sur la portée locale

Options du composant i18n

Dans 'Portée et changement de paramètres régionaux', Vue I18n a deux concepts de portée, la portée globale et la portée locale.

En général, les informations de paramètres régionaux (par exemple locale, messages, etc.) sont définies comme option de createI18n et est configurée (installée) avec app.use. En résumé, vous utilisez les fonctions de traduction de la portée globale $t pour les localiser.

Parfois, il est nécessaire de localiser par composant tout en maintenant les ressources des messages locaux. Dans ce cas, il peut être utile de localiser chaque portée locale en utilisant l'option de composant i18n sur le composant au lieu de la portée globale.

L'exemple suivant illustre une localisation basée sur la portée locale :

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

// définition des informations de paramètres régionaux utilisées par la portée globale comme options
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning, world!'
      }
    },
    zh: {
      message: {
        hello: '你好、世界',
        greeting: '早上好、世界！'
      }
    }
  }
})

// définition du composant
const Component1 = {
  template: `
    <div id="component">
      <h1>Component1</h1>
      <p>Messages locaux du composant1 : {{ $t("message.hello") }}</p>
      <p>Messages locaux globaux en mode de secours : {{ $t("message.greeting") }}</p>
    </div>
  `,
  i18n: {
    messages: {
      en: { message: { hello: 'hello component1' } },
      zh: { message: { hello: '你好、component1' } }
    }
  }
}

const app = createApp({
  components: { Component1 }
})
app.use(i18n)
app.mount('#app')

Modèle :

<div id="app">
  <h1>Racine</h1>
  <p>{{ $t("message.hello") }}</p>
  <Component1 />
</div>

Affiche le résultat suivant :

<div id="app">
  <h1>Racine</h1>
  <p>你好、世界</p>
  <div class="component">
    <p>Messages locaux du composant1 : 你好、component1</p>
    <p>Messages locaux globaux en mode de secours : 早上好、世界！</p>
  </div>
</div>

Comme dans l'exemple ci-dessus, si le composant n'a pas le message régional, il passe en mode de secours à la portée globale. Comme expliqué ici, en raison de l'héritage de locale de la portée locale depuis la portée globale, le composant utilise la langue définie dans la portée globale (dans l'exemple ci-dessus : locale: 'ja')

Et également, comme expliqué ici, notez qu'au niveau par défaut, passer en mode de secours vers la portée globale génère deux avertissements dans la console :

[intlify] Not found 'message.greeting' key in 'ja' locale messages.
[intlify] Fallback to translate 'message.greeting' with root locale.

Si vous souhaitez localiser en utilisant les paramètres régionaux du composant, vous pouvez le faire avec sync: false et locale dans l'option de composant i18n.

Messages régionaux partagés pour les composants

Parfois, vous pouvez vouloir importer les messages régionaux partagés pour certains composants, sans passer en mode de secours depuis les messages régionaux de la portée globale (par exemple, les messages communs d'une fonctionnalité spécifique pour les composants).

Vous pouvez utiliser l'option sharedMessages de i18n.

Exemple de messages régionaux communs :

export default {
  en: {
    buttons: {
      save: "Save",
      // ...
    }
  },
  zh: {
    buttons: {
      save: "保存",
      // ...
    }
  }
}

Composants :

import commonMessage from './locales/common' // importer les messages régionaux communs

export default {
  name: 'ServiceModal',
  template: `
    <div class="modal">
      <div class="body">
        <p>Ceci est un bon service</p>
      </div>
      <div class="footer">
        <button type="button">{{ $t('buttons.save') }}</button>
      </div>
    </div>
  `,
  i18n: {
    messages: { ... },
    sharedMessages: commonMessages
  }
}

Si l'option sharedMessages est spécifiée avec l'option messages, ces messages seront fusionnés dans les messages régionaux dans l'instance VueI18n du composant cible.