vue.js - 为所有组件 Vue3 加载 i18n

Question

使用 vue-i18n 时，我需要将其添加到每个组件中：

setup() {
  const { t, locale } = useI18n();
  return { t, locale };
}

有没有办法将t功能预加载到我的所有组件中？

标签： vue.jsvue-componentvuejs3vue-i18n

Answer 1

createI18n()创建一个 Vue 插件，使vue-i18n所有组件全局可用：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n(/*...*/)
createApp(App).use(i18n).mount('#app')

t然后在模板中可用,$t和.locale$i18n.locale

演示