[question | help] how do I working with i18n if the content comes from Backend API ?

[moHaHa]

this is how it looks but how can I use it if the messages are stored in database and I have to fetch it the API for it, then use it here?
I can imagine how to do it in Vuejs only but with Nuxt I feel unconfident

export default defineI18nConfig(nuxt => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

the fetch looks like this

interface message{
  title: string
  paragraph: string
}
interface lang {
  name: string
  data: message
}
const ex: lang = {
  name: 'ar',
  data: {
    title: 'title',
    paragraph: 'some text',
  },
}

async function fetchData() {
  const languages: lang[] = axios.get('api/languages')
  const arLang: lang = axios.get('api/languages/ar')
  const enLang: lang = axios.get('api/languages/en')
}

[bitbytebit1]

I found the docs to be rather helpful in this matter
https://i18n.nuxtjs.org/lazy-load-translations

[kazupon]

The documentation for v8 also mentions how to retrieve the locale (fetch) dynamically.
https://v8.i18n.nuxtjs.org/guide/lazy-load-translations