Интернационализация для vue 3 vite с i18n

В настоящее время я пытаюсь интернационализировать свой проект vue 3 vite с помощью @intlify/vite-plugin-vue-i18n. Проблема, с которой я столкнулся здесь, заключается в том, что в настоящее время мне нужно импортировать и настроить переменную t для каждого компонента, чтобы использовать ее.
пример компонента:

<template>
  t('translation')
</template>

<script>
import { useI18n } from 'vue-i18n'
export default {
  setup(){
    const {t} = useI18n();
    return {t}
  },
};
</script>

Мой вопрос: если это возможно, как лучше всего сделать переменную t глобальной? Я не могу найти никаких примеров/помощи по этому поводу, так как все они импортируют его в каждый компонент. Вся помощь будет оценена! :) Для справки вот соответствующие файлы.

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**')
    })
  ]
})

main.ts:

import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount("#app");

i18n.js:

import { createI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

export default createI18n({
  legacy: false,
  locale: 'no',
  messages
})

vue.js internationalization vuejs3 vue-i18n vite
person stackmeister    schedule 21.03.2021    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Плагин i18n, регистрирующийся с использованием app.use(i18n), делает глобальную функцию $t доступной для всех дочерних компонентов:

<template>
 {{$t('translation')}}
</template>

эта функция также доступна в опции API, и вам может понравиться:

mounted(){
console.log(this.$t('translation'))

}

но вы должны добавить globalInjection: true, в конфигурацию i18n следующим образом:

import { createI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

export default createI18n({
  legacy: false,
  locale: 'no',
  globalInjection: true,
  messages
})

БОНУС:

измените локаль, наблюдая за геттером внутри App.vue, затем установите локаль:

<script>

import { defineComponent, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";


export default defineComponent({
  name: "app",
  data() {
    return {};
  },

  setup() {
    const i18n = useI18n();
    const store = useStore();

    watch(()=>store.getters.currentLang,(newVal) => { //watch the getter

      i18n.locale.value = store.getters.currentLang;
    },{
      immediate:true
    });
  },
});
</script>
person Boussadjra Brahim    schedule 21.03.2021
comment
Как мы можем изменить локаль при срабатывании действия?? - person sgClaudia98; 29.06.2021
comment
пожалуйста, проверьте мой отредактированный ответ - person Boussadjra Brahim; 29.06.2021
comment
Я обнаружил, что вы можете использовать $i18n.locale = 'es', например, для перехода на испанский язык - person sgClaudia98; 29.06.2021
comment
Да, в настройках API или шаблона вы можете это сделать - person Boussadjra Brahim; 29.06.2021