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'
    }
  }
}))

[ineshbose]

Could you share a snippet of how you fetch from the API?

[moHaHa]

interface page {
  title: string
  paragraph: string
}
interface lang {
  locale: string
  data: page
}
const ex: lang = {
  locale: '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')
}

I used Axios just for example, I don't know to want to use in Nuxt,
I'm not realy good in ts but I think this can help explain the API result for you

[ineshbose]

You can take advantage of locale from useI18n composable.

const { locale } = useI18n()

async function fetchData() {
  const lang: lang = axios.get('api/languages/${locale.value}')
}

Best to use useFetch when possible with a watcher on locale to refresh content as desired!

[moHaHa]

@ineshbose so How can this be helpful?
how does messages object changed to contain the massges from the api ?

 messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }

 messages: {
    en: {
        title: 'title en',
        paragraph: 'some text en',
    },
    fr: {
        title: 'title fr',
        paragraph: 'some text fr',
    }
  }

[ineshbose]

Those get utilised by the translator function t:

const { t } = useI18n();

console.log(t('title'))

If you mean that those objects are being fetched from API, look into langDir and adding JS files there. It has been a big part of this module to implement this, and docs for it are WIP.

[moHaHa]

@ineshbose