While working on my Nuxt 3 app, I encountered an issue when trying to integrate i18n. Despite conducting extensive research, I couldn't find any helpful information, hence I have a question.
I am utilizing i18n with Prismic CMS. The locales array is sourced from the Prismic API, fetched using my composable useLocales. Within this composable, I also store the data in global state using useState and return it.
Upon successful retrieval, my goal is to populate the i18n instance with this data. However, I quickly realized that achieving this was not as straightforward as I had initially thought - none of my attempts have been successful so far.
Here are some approaches I have tried:
- I attempted to fetch data directly within the
defineNuxtConfigfunction and set the payload as the value for thelocaleskey - it became apparent that this method would not work, as asynchronous operations cannot be performed there.
// Inside defineNuxtConfig
i18n: {
...
locales: await useLocales(),
defaultLocale: "en-pl",
...
},
- I then tried fetching data in a custom plugin and setting the payload as the value for the
localeskey of the $i18n property. This appeared to update thelocales, but did not affect the routing system:
export default defineNuxtPlugin(async ({ $i18n }) => {
const locales = await useLocales();
$i18n.locales = locales;
});
- Another attempt involved fetching data in a custom plugin in a similar manner, but instead of updating the existing i18n instance, I created a new one:
export default defineNuxtPlugin(async ({ vueApp }) => {
const locales = await useLocales();
const i18nInstance = createI18n({
legacy: false,
globalInjection: true,
locale: "en-pl",
locales: locales,
});
vueApp.use(i18nInstance);
});
In the documentation and community forums, most examples involve hardcoding locales data - I have struggled to find a solution that fits my specific use case online, which is surprising given its commonality.
If anyone has insight into how to correctly set these locales, I would greatly appreciate it.