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

Question

В настоящее время я пытаюсь интернационализировать свой проект 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
})

Answer 1

Плагин 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
})

Answer 2

У меня есть дополнительный пример доступа к глобальному экземпляру композитора в vue-i18n v9:

i18n.js

      import { createI18n } from 'vue-i18n';
import en from './locales/en';
import fr from './locales/fr';

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
        en,
        fr,
    },
});

export default i18n;

main.js

      import i18n from './i18n.js';

...

app.use(i18n);

Затем вы можете импортировать экземпляр в любой файл, например, в хук beforeEnter vue-router или vuex и т. д.

      import i18n from '../i18n.js';

console.log('i18n', i18n.global);

// to change locale:
i18n.global.locale.value = 'en';

Вы получаете к нему доступ через i18n.global. это тот же экземпляр, который возвращается через useI18n()из пакета vue-i18n.