如何使 i18n 设置异步 Nuxt 3

Question

活动语言和翻译来自 API。我需要找到一种方法将 i18n 设置为异步。 因此，首先我将从 API 获取该网站的可用语言，然后我会从前缀/cookie 检测当前语言并仅获取它的翻译，之后我会听 nuxtApp.$i18n.onBeforeLanguageSwitch 这样我就可以获取翻译如果需要并将其添加到 i18n 对象

已编辑

nuxt.config.ts

i18n: {
    locales: ['en', 'ru', 'es', 'de', 'fi', 'sv', 'fr', 'it', 'br'],
    defaultLocale: 'en',
    strategy: 'prefix',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
    },
  },

plugins/i18n.ts

export default defineNuxtPlugin(nuxtApp => {

  useAsyncData('directory_translations', async () => {
    const data = await DirectoryApi.getAllDirectories()
    const directory = DirectoryService.createDirectoryObject(data)
    const translationsData = await DirectoryApi.getTranslations(directory.languages[nuxtApp.$i18n.locale.value].ID)
    const translations = DirectoryService.createTranslationsObject(translationsData, directory)

    nuxtApp.$i18n.mergeLocaleMessage(nuxtApp.$i18n.locale.value, translations)
    // this is working also, but somehow messages are created from scratch on client side and data is lost
    useState('directory', () => directory)
    useState('translations', () => translations)

  })

  nuxtApp.$i18n.onBeforeLanguageSwitch = async (oldLocale, newLocale, isInitialSetup, nuxtApp) => {
    // This works
    const directory = useState('directory') as Ref<Directory>
    const translationsData = await DirectoryApi.getTranslations(directory.value.languages[newLocale].ID)
    const translations = DirectoryService.createTranslationsObject(translationsData, directory.value)
    nuxtApp.$i18n.mergeLocaleMessage(newLocale, translations)
  }
})

<script lang="ts" setup>

const {messages} = useI18n()

</script>

<template>

<div>
 {{ JSON.stringify(messages) }} 
</div>

</template>

服务器端一切正常，在收到的 html（从服务器）上我可以看到消息列表，但似乎 i18n 在客户端上重新运行更多，我的消息消失了

Answer 1

OP 通过使用异步插件 + 使用

node-fetch

获取数据（而不是

useAsyncData

）解决了该问题。

我还建议您尝试一下（在任何地方都适用）：https://github.com/unjs/ohmyfetch