[QUESTION] How to use import.meta.glob to dynamically import translations

[Red-Asuka]

Environment

Operating System: MacOS
Node Version: v20.3.1
Nuxt Version: 3.6.1
Nitro Version: 2.5.2
Package Manager: [email protected]
Builder: vite

Reproduction

https://stackblitz.com/edit/github-vjsmyp?file=lang%2Fen-US.ts

Describe the bug

In Nuxt2, I use require.context to dynamically import translations, and it works well. Now I'm trying to upgrade the project to Nuxt3 and use import.meta.glob. When modifying the code under dev mode, it shows that it works fine after hot update. However, when running dev or build again, it displays an ERROR 'unknown' type in '/Users/xxx/lang/en-US.ts'.

Is there any way to dynamically import translations?

Additional context

No response

Logs

No response

[kazupon]

This is a question, so we will move to github disucuttions.

[kazupon]

You can use lazy loading
See the docs here:
https://v8.i18n.nuxtjs.org/guide/lazy-load-translations

[Red-Asuka]

Due to the large amount of text on my website, I have divided the text based on pages. Using files requires manually maintaining a list of files, which needs to be modified every time a new page is added. Is there a way to specify importing all files in a specific folder, thus reducing the need for manual updates?

[Guito]

I did the following in the setup of the page / layout:

const file = 'example_en.js' // This can be created using your locale
const translations = import.meta.glob(`~/assets/locales/*.js`, {import: 'default'}); 
const currentLocaleTranslation = await translations[`/assets/locales/${file}`]()
mergeLocaleMessage(locale.value, currentLocaleTranslation)

[Red-Asuka]

@Guito Thank you for your reply, I finally set it up this way and achieved the same effect.

/lang/en-US.ts

export default defineI18nLocale(() => {
  const importAllTranslations = import.meta.glob(
    '../lang/en-US/*.ts',
    {
      eager: true,
      import: 'default',
    },
  )
  const combinedTranslations = Object.values(importAllTranslations).reduce(
    (acc: any, cur: any) => Object.assign(acc, cur),
    {},
  )
  return combinedTranslations
})

i18n config

lazy: true,
langDir: 'lang/',
defaultLocale: 'en',
locales: [
    {
      code: 'en',
      name: 'English',
      iso: 'en',
      file: 'en-US.ts',
    },
]