vuejs3 I18n et API de composition

Question

J'utilise actuellement vueJS pour créer une interface frontale, et j'utilise actuellement vuejs 3 et i18n. L'implémentation i18n fonctionne normalement, mais lorsque je souhaite l'utiliser avec l'API de composition, des problèmes surviennent.

Alors qu’est-ce que j’ai fait. Mon main.js ressemble à ceci :

const i18n = createI18n({
    messages: {
        en: en,
        fr: fr
    },
    fallbackLocale: 'en',
    locale: localStorage.Language || navigator.language.split('-')[0] || 'en',
})
const app = createApp(App)


app.use(router)
app.use(i18n)

app.mount('#app')

J'ai vu dans la documentation que pour utiliser l'API de composition, je devais ajouter Legacy:false, alors je l'ai fait. Ensuite, mon $t ne fonctionne plus. J'ai regardé plus loin dans la documentation et suis arrivé là où j'étais perdu. La documentation dit d'utiliser ceci :

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

Mon problème est que ma createApp est déjà utilisée comme ceci :

const app = createApp(App)

Il s'agit de l'implémentation par défaut de Vuejs. J'ai essayé de le modifier, d'ajouter des paramètres après l'application, avant, et la suppression de l'application n'a aucun effet et je pense que je fais de plus en plus de bêtises.

Est-ce que quelqu'un sait comment faire fonctionner i18n avec l'API de composition ? L'objectif final est essentiellement d'utiliser le composant switchLanguage réalisé avec l'API de composition pour accéder à $i18n (obtenir des informations et gérer mon changement de langue)

Merci d'avance pour toute aide.

Answer 1

Vous êtes déjà sur l'application main.js 中实例化了 i18n. C'est un point important.

Les exemples fournis dans la documentation ne doivent pas nécessairement être présents createApp 中定义的实例上完成。它适用于任何组件，只要您在 main 上实例化了 i18n。(js|ts)

Cela fonctionne pour n'importe quel composant (quels que soient vos besoins t) :

import { useI18n } from "vue-i18n";

export default defineComponent({
  setup() {
    const { t } = useI18n();
    // you can now use t('some.text.to.be.translated')
    // t('some.text.to.be.pluralized', { n: 1 }, 1);

    return {
      // expose `t` to 

Remarque : Tous les $tc (pluriel ization ) a été déplacée vers $tc (复数化 ) 功能已移至 t.

Si vous mettez à niveau une application existante et que vous ne souhaitez pas passer par des modèles et remplacer toutes les instances de $t et $tc par $t 和 $tc 的所有实例替换为 t :

setup: () => ({ 
  $t: useI18n().t
  $tc: useI18n().t 
})

---

Pour les importer et les exposer dans $t 和 $tc 在任何组件的 <template> 中可用，而不必在 <script> （或 <script setup>) :

import App from './App.vue'
import { useI18n } from 'vue-i18n'

const app = createApp(App);
app.config.globalProperties.$t = useI18n().t

• Si vous importez dans <script> 中仍然需要它们，请从 'vue-i18n' comme indiqué ci-dessus.
• $tc 在 Vue3 中不再使用。如果您的模板来自 Vue2，最好将所有 $tc 替换为 $t。或者，如果您不想触及模板，您可以将 useI18n().t Attribué aux deux :

Object.assign(app.config.globalProperties, {
  $t: useI18n().t,
  $tc: useI18n().t
})