How to configure formkit to use the current locale of @nuxtjs/i18n

[devbrains-com]

Hello everyone

How do I need to configure my project using @nuxtjs/i18n and @formkit/nuxt to have the current locale in sync based on the routes locale?

My nuxt.config.ts:

i18n: { locales: ['de', 'en'], vueI18n: { legacy: false, fallbackLocale: 'de', locale: 'de', messages: { de, en } } }

My formkit.config.ts:

locales: { de, en }

Thank you very much for your help.
Michael

[ineshbose]

FormKit is an incredible tool that I'm using for one of my Nuxt projects that also uses i18n. This is how you could keep locales for both modules in sync:

const { locale, locales, setLocale } = useI18n();
const fkConfig = inject(Symbol.for('FormKitConfig'));
fkConfig.locale = locale.value;

watch(locale, (newLocale) => fkConfig.locale = newLocale);

// or if you want to use click event of a button
const changeLocale = (code) => {
  fkConfig.locale = code;
  setLocale(code);
};

Keep in mind that this only uses @nuxtjs/i18n to switch locales and take preference over FormKit - not having separate switches.

[devbrains-com]

Thank you very much 👍

I added your code to the app.vue script section and it works as expected.